/* HRTally best HR software listicles. Loaded after blog.css and templates.css. */

/* Hero */
.bh-hero{background:radial-gradient(800px 380px at 100% -10%,rgba(122,12,247,.13),transparent 60%),radial-gradient(700px 360px at -10% 0%,rgba(16,182,240,.13),transparent 60%),#fff;border-bottom:1px solid var(--line);padding:34px 0 42px}
.bh-hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:44px;align-items:center}
.bh-hero .crumbs{margin-bottom:14px}
.bh-updated{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--good);background:#e8f8f1;border-radius:999px;padding:5px 12px}
.bh-updated svg{color:var(--good)}
.bh-hero h1{font-size:clamp(30px,3.8vw,46px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 12px}
.bh-lede{font-size:18px;line-height:1.6;color:var(--ink-2);margin:0 0 18px;max-width:640px}
.bh-trust{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.bh-trust li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--ink)}
.bh-trust svg{width:18px;height:18px;color:var(--indigo);flex:none}
.bh-hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.bh-podium{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:10px}
.bh-podium-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bh-mini{display:grid;grid-template-columns:30px 44px minmax(0,1fr);grid-template-areas:"r m t" "r m s";align-items:center;gap:2px 12px;padding:12px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.bh-mini:hover{border-color:#c9c3ff;transform:translateY(-2px)}
.bh-mini .bh-rank{grid-area:r}.bh-mini .bh-mono{grid-area:m}.bh-mini-t{grid-area:t;min-width:0}.bh-mini-r{grid-area:s;display:flex;align-items:center;gap:6px}
.bh-mini-t strong{display:block;font-size:16px;color:var(--ink)}
.bh-mini-t em{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:var(--indigo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-podium-more{font-size:14px;font-weight:800;color:var(--indigo);text-align:center;padding-top:4px}

/* Rank, monogram, stars, chips */
.bh-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:14px;flex:none}
.bh-rank.bh-xs{width:24px;height:24px;font-size:12px}
.bh-rank.bh-xl{width:40px;height:40px;font-size:18px;background:var(--grad)}
.bh-mono{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;flex:none}
.bh-mono.bh-xs{width:30px;height:30px;border-radius:9px;font-size:12px}
.bh-mono.bh-xl{width:56px;height:56px;border-radius:16px;font-size:19px}
.bh-mono.h0{background:linear-gradient(135deg,#0a9cf5,#3d33e6)}.bh-mono.h1{background:linear-gradient(135deg,#7a0cf7,#b53cf0)}.bh-mono.h2{background:linear-gradient(135deg,#0f9d6b,#10b6f0)}
.bh-mono.h3{background:linear-gradient(135deg,#0b1d3a,#3d33e6)}.bh-mono.h4{background:linear-gradient(135deg,#e2572b,#f0a020)}.bh-mono.h5{background:linear-gradient(135deg,#d43a5c,#7a0cf7)}
.bh-stars{position:relative;display:inline-block;width:92px;height:18px;vertical-align:middle;flex:none}
.bh-stars.big{width:122px;height:24px}
.bh-stars svg{display:block;width:92px;height:18px}
.bh-stars.big svg{width:122px;height:24px}
.bh-s-bg{color:#dfe3ef;position:absolute;inset:0}
.bh-s-fg{color:#ffb020;position:absolute;left:0;top:0;bottom:0;overflow:hidden}
.bh-r{font-weight:800;color:var(--ink);font-size:14.5px;margin-left:6px;vertical-align:middle}
.bh-chip{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ink-2);background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin:0 4px 4px 0}
.bh-seg{display:inline-block;font-size:11.5px;font-weight:800;border-radius:6px;padding:3px 7px;margin:0 4px 4px 0;background:#f1f2f7;color:#a5abc2}
.bh-seg.on{background:#e8f8f1;color:#0b7a53}
.bh-maker{font-size:13px;color:var(--ink-3);font-weight:600}
.bh-nowrap{white-space:nowrap}

/* Sticky section nav */
.bh-nav{position:sticky;top:72px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bh-nav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.bh-nav-in::-webkit-scrollbar{display:none}
.bh-nav a{flex:none;font-size:14px;font-weight:700;color:var(--ink-2);padding:8px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}
.bh-nav a:hover,.bh-nav a.active{background:#f1efff;color:var(--indigo)}
.bh-nav a.bh-nav-cta{margin-left:auto;background:var(--grad);color:#fff}

/* Body */
.bh-body{padding-top:34px}
.bh-article{max-width:900px;margin:0 auto}
.bh-answer{max-width:900px;margin:0 auto 34px;border:2px solid #dcd6ff;border-radius:22px;background:linear-gradient(135deg,#fff,#f6f3ff);overflow:hidden;scroll-margin-top:140px}
.bh-answer-in{padding:22px 24px 6px}
.bh-answer-p{font-size:17.5px;line-height:1.7;color:var(--ink);margin:6px 0 14px}
.bh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bh-quick{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff}
.bh-quick th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--mist)}
.bh-quick td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
.bh-quick tr:last-child td{border-bottom:0}
.bh-tname{display:flex;align-items:center;gap:10px;text-decoration:none!important;color:inherit}
.bh-tname strong{display:block;color:var(--ink)}
.bh-tname em{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:var(--indigo)}
.b-sec{scroll-margin-top:140px}

/* Pick cards */
.bh-pick{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);margin:0 0 22px;overflow:hidden;scroll-margin-top:140px}
.bh-pick-h{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#f8f7ff,#fff)}
.bh-pick-t{flex:1;min-width:0}
.bh-label{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7a4b00;background:#fff3cf;border-radius:999px;padding:3px 10px}
.bh-pick-t h3{font-family:"Bricolage Grotesque",sans-serif;font-size:26px;margin:4px 0 0;color:var(--ink)}
.bh-pick-r{text-align:right;flex:none}
.bh-pick-r .bh-r{font-size:20px}
.bh-r-note{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700;margin-top:2px}
.bh-pick-b{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.bh-pick-main{padding:18px 22px 6px}
.bh-pick-main h4{font-family:"Manrope",sans-serif;font-size:15px;font-weight:800;margin:14px 0 4px;color:var(--ink)}
.b-article .bh-pick-main p{font-size:16px;line-height:1.65;margin-bottom:8px}
.b-article .bh-best{font-size:15.5px!important;background:var(--mist);border-radius:10px;padding:8px 12px}
.bh-more{font-size:14.5px!important}
.bh-pick-side{border-left:1px solid var(--line);padding:18px 20px;background:#fcfcff;display:flex;flex-direction:column}
.bh-pick-side dl{margin:0}
.bh-pick-side dt{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.bh-pick-side dd{margin:0 0 14px;font-size:14.5px;color:var(--ink-2)}
.bh-pick-cta{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.bh-pick-cta .btn{justify-content:center}
.b-article .bh-pick-cta a.btn-primary{color:#fff}
.bh-cmp{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer}
.bh-cmp input{width:17px;height:17px;accent-color:var(--indigo)}
.bh-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:18px;padding:18px 22px;margin:0 0 22px;background:var(--grad);color:#fff}
.bh-inline-cta strong{display:block;font-size:17px}
.bh-inline-cta span{display:block;font-size:14.5px;color:#e9e6ff}
.b-article .bh-inline-cta a.btn-primary{background:#fff;color:var(--indigo);box-shadow:none;flex:none}
.bh-inline-cta.soft{background:var(--grad-soft);color:var(--ink);border:1px solid #dcd6ff}
.bh-inline-cta.soft span{color:var(--ink-2)}
.b-article .bh-inline-cta.soft a{flex:none}

/* Comparison table */
.bh-cmp-table,.bh-method{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:720px}
.bh-method{min-width:560px}
.bh-cmp-table th,.bh-cmp-table td,.bh-method th,.bh-method td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;color:var(--ink-2)}
.bh-method th,.bh-method td{text-align:left;vertical-align:top}
.bh-cmp-table thead th,.bh-method thead th{background:var(--mist);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.bh-cmp-table tbody th{text-align:left;font-weight:800;white-space:nowrap}
.bh-cmp-table tbody th a{color:var(--ink);text-decoration:none}
.bh-star1{display:inline-block;width:16px;height:16px;color:#ffb020;vertical-align:-2px}
.bh-yes{width:18px;height:18px;color:var(--good)}
.bh-sz{white-space:nowrap}
.bh-dot{display:inline-block;font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 4px;background:#f1f2f7;color:#b7bdd6}
.bh-dot.on{background:#e8f8f1;color:#0b7a53}

/* Directory */
.bh-dir{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;scroll-margin-top:120px}
.bh-dir-h{max-width:820px;margin-bottom:18px}
.bh-dir-h h2{font-size:clamp(26px,3vw,36px);margin:6px 0 8px}
.bh-dir-h p{color:var(--ink-2);font-size:16.5px}
.bh-filters{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.bh-filters .bh-search{margin-top:0;max-width:none;box-shadow:none}
.bh-filters select{border:1.5px solid var(--line);border-radius:999px;padding:11px 14px;font:inherit;font-size:14.5px;background:#fff;color:var(--ink);min-width:0}
.bh-types{margin-bottom:12px}
.bh-jump{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.bh-jump button,.bh-jump span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;font-weight:800;font-size:13.5px}
.bh-jump button{background:#fff;color:var(--indigo);border:1px solid var(--line);cursor:pointer;font-family:inherit}
.bh-jump button:hover{background:#f1efff}
.bh-jump span{color:#c3c8db}
.bh-count{font-size:14px;font-weight:800;color:var(--ink-3);margin:0 0 12px}
.bh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bh-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;scroll-margin-top:140px;transition:border-color .15s,box-shadow .15s}
.bh-card:hover{border-color:#c9c3ff;box-shadow:0 14px 34px rgba(13,19,48,.08)}
.bh-card.hide{display:none}
.bh-card.sel{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(61,51,230,.12)}
.bh-card-h{display:flex;align-items:center;gap:12px}
.bh-card-h h3{font-family:"Manrope",sans-serif;font-size:17.5px;font-weight:800;margin:0;color:var(--ink)}
.bh-card-r{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bh-type{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--indigo);background:#f1efff;border-radius:999px;padding:3px 9px}
.bh-card .bh-best{font-size:14px;color:var(--ink);margin:0;background:var(--mist);border-radius:10px;padding:7px 10px;line-height:1.45}
.bh-card-why{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0;flex:1}
.bh-card-f{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.bh-price{font-size:12.5px;font-weight:800;color:var(--ink-3)}
.bh-card-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bh-card-cta .btn{padding:9px 10px;font-size:13.5px;justify-content:center}

/* Lead form */
.bh-lead{padding:56px 0;background:linear-gradient(135deg,#0b1d3a,#231a8f 60%,#4b12b8);color:#fff;scroll-margin-top:120px}
.bh-lead-in{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.bh-lead .eyebrow{color:#b9c3ff}
.bh-lead h2{color:#fff;font-size:clamp(26px,3vw,36px);margin:8px 0 10px}
.bh-lead-copy p{color:#d9dcf5;font-size:16.5px;line-height:1.6}
.bh-lead-points{list-style:none;margin:16px 0 0;padding:0}
.bh-lead-points li{position:relative;padding-left:28px;margin:0 0 8px;color:#fff;font-weight:700}
.bh-lead-points li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#45d08a}
.bh-form{background:#fff;color:var(--ink);border-radius:20px;padding:22px}
.bh-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.bh-form-grid input,.bh-form-grid select,.bh-form-grid textarea{border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:14.5px;background:#fff;min-width:0;width:100%;color:var(--ink)}
.bh-form-grid textarea,.bh-form-grid .full{grid-column:1/-1}
.bh-form-grid .err{border-color:#d43a5c;background:#fff6f8}
.bh-form .btn{width:100%;justify-content:center}
.bh-cform{border:1px solid var(--line);box-shadow:var(--shadow)}
.b-article .bh-cform .btn-primary{color:#fff}

/* Journey */
.bh-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bh-step{position:relative;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}
.bh-step.hot{border:2px solid #c9c3ff;background:#faf9ff}
.bh-step-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:14px}
.bh-step h3{font-family:"Manrope",sans-serif;font-size:16px;font-weight:800;margin:10px 0 4px}
.b-article .bh-step p{font-size:14px;margin:0 0 8px;line-height:1.5}
.b-article .bh-step ul{list-style:none;margin:0!important;padding:0}
.b-article .bh-step li{font-size:14px;margin:0 0 5px;padding:0}
.bh-lists{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}

/* Compare tray and mobile CTA */
.bh-tray{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#0b1d3a;color:#fff;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.bh-tray[hidden]{display:none}
.bh-tray-in{display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px}
#bh-tray-list{flex:1;font-weight:700;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-tray .btn{padding:10px 16px;font-size:14px}
.bh-tray .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.bh-mcta{display:none}

@media (max-width:1100px){
  .bh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bh-journey{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .bh-hero-in,.bh-lead-in{grid-template-columns:1fr}
  .bh-pick-b{grid-template-columns:1fr}
  .bh-pick-side{border-left:0;border-top:1px solid var(--line)}
  .bh-filters{grid-template-columns:1fr 1fr}
  .bh-filters .bh-search{grid-column:1/-1}
  .bh-lists{grid-template-columns:1fr}
  .bh-nav a.bh-nav-cta{margin-left:0}
}
@media (max-width:640px){
  .bh-trust{grid-template-columns:1fr}
  .bh-grid,.bh-journey,.bh-form-grid{grid-template-columns:1fr}
  .bh-hide-s{display:none}
  .bh-pick-h{flex-wrap:wrap;padding:16px}
  .bh-pick-r{text-align:left;width:100%;display:flex;align-items:center;gap:8px}
  .bh-pick-r .bh-r-note{display:inline;margin:0}
  .bh-pick-t h3{font-size:22px}
  .bh-pick-main,.bh-pick-side{padding:16px}
  .bh-inline-cta{flex-direction:column;align-items:flex-start}
  .bh-lead-in{padding:0 16px}
  .bh-mcta{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:55;text-align:center;background:var(--grad);color:#fff;font-weight:800;border-radius:999px;padding:14px;box-shadow:0 12px 26px rgba(59,43,217,.35);text-decoration:none;transition:opacity .2s,transform .2s}
  .bh-mcta.off{opacity:0;transform:translateY(80px);pointer-events:none}
  .bh-nav{top:64px}
}