/* House ad slots and the small motion on employer and role/city pages (docs/AD_SLOTS_PLAN.md, 2026-10-25).
   Kit tokens only. Every motion is under prefers-reduced-motion: no-preference, and the page is complete without it. */
.ha{position:relative;margin:36px 0 28px}
.ha-lab{position:absolute;top:-11px;left:14px;z-index:1;background:var(--ink);color:var(--canvas);padding:4px 9px}
.ha-btn{display:inline-block;background:var(--ink);color:var(--canvas);padding:13px 20px;font:700 .8rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%);white-space:nowrap}
.ha-btn:hover,.ha-btn:focus-visible{background:var(--cobalt);color:#fff}
.ha h3{margin:0;font:900 clamp(1.7rem,3.6vw,2.5rem)/.95 var(--f-d);font-stretch:62%;text-transform:uppercase}
.ha p{margin:8px 0 0;max-width:48ch}
/* A: after the latest jobs */
.ha-a{display:grid;grid-template-columns:84px 1fr auto;gap:22px;align-items:center;background:var(--lime);color:#111827;border:1.5px solid var(--ink);box-shadow:var(--shadow);padding:24px 26px;min-height:150px}
.ha-a .ha-btn{background:#111827;color:var(--canvas)}
.ha-mark{width:82px;height:82px}
/* B: end of the page */
.ha-b{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:#111827;color:var(--canvas);box-shadow:10px 10px 0 var(--cobalt);padding:26px 28px;min-height:130px}
.ha-b .ha-btn{background:var(--lime);color:#111827}
/* C: one line inside the list */
.ha-slot-c{display:flex;gap:14px;align-items:center;border:1.5px dashed var(--ink);background:var(--base);padding:12px 16px;margin:10px 0;min-height:64px}
.ha-slot-c .ha-lab{position:static;margin-right:2px;background:var(--lav);color:var(--ink);border:1.5px solid var(--ink);flex:none}
.ha-slot-c b{font-size:1rem}
.ha-slot-c .ha-btn{margin-left:auto;padding:9px 14px;font-size:.7rem}
@media(max-width:700px){
  .ha-a{grid-template-columns:1fr;min-height:0}.ha-mark{display:none}
  .ha-b{grid-template-columns:1fr;min-height:0}
  .ha-slot-c{flex-wrap:wrap;min-height:96px}.ha-slot-c .ha-btn{margin-left:0}
}
/* rows lift, tallies draw as bars, chips lean */
.latest .job{transition:transform .15s,box-shadow .15s}
.latest .job:hover,.latest .job:focus-visible{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.tally li{position:relative;isolation:isolate}
.tally li::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0);background:var(--lav);opacity:.6;z-index:-1}
.tally li:nth-child(3n+2)::before{background:var(--lime)}.tally li:nth-child(3n)::before{background:var(--sand)}
.tally li.rest::before{display:none}
#pay-compare .cmp-here td{background:var(--lime);font-weight:700}
.hero .mono.live::before{animation:ha-pulse 1.8s infinite}
@keyframes ha-pulse{0%{box-shadow:0 0 0 0 rgba(223,255,104,.6)}100%{box-shadow:0 0 0 11px rgba(223,255,104,0)}}
@media(prefers-reduced-motion:no-preference){
  .js-alive .tally li::before{width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
  .js-alive.alive-in .tally li::before{width:var(--w,0)}
  /* the figures slide up into place: a transform only, never opacity and never a change of text, so a render mid-animation still reads them */
  .js-alive .regcard .stat .n,.js-alive .tiles .big-num{transform:translateY(.45em)}
  .js-alive.alive-in .regcard .stat .n,.js-alive.alive-in .tiles .big-num{transform:none;transition:transform .7s cubic-bezier(.2,.9,.3,1.2)}
  .js-alive.alive-in .regcard .stat:nth-child(2) .n,.js-alive.alive-in .tiles>div:nth-child(2) .big-num{transition-delay:.08s}
  .js-alive.alive-in .regcard .stat:nth-child(3) .n,.js-alive.alive-in .tiles>div:nth-child(3) .big-num{transition-delay:.16s}
  .emp-two .plink{display:inline-block;transition:transform .15s}.emp-two .plink:hover{transform:rotate(-1.5deg) translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){.hero .mono.live::before{animation:none}}