/* Self-hosted Google Fonts: Syne for small labels; Bebas Neue for the sign-inspired runner. SIL OFL files accompany both. */
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/syne-700.woff') format('woff')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bebas-neue-400.woff') format('woff')}
/* Brand runner: readable static content first; motion is progressive enhancement. */
.payroll-runner{--runner-charcoal:#30362e;--runner-duration:36s;background:#7AB52E;color:var(--runner-charcoal);padding:24px 0 28px;border-block:1px solid rgba(48,54,46,.15);overflow:hidden}
.runner-topline{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:19px}
.payroll-runner h2{margin:0;color:var(--runner-charcoal);font-family:Syne,Manrope,Arial,sans-serif;font-size:clamp(17px,1.4vw,20px);font-weight:700;line-height:1.4;letter-spacing:-.015em;text-transform:none}
.payroll-runner h2 span{font-weight:700}
.runner-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 15px;border:1px solid rgba(48,54,46,.5);border-radius:99px;background:transparent;color:var(--runner-charcoal);font-family:Manrope,Arial,sans-serif;font-size:12px;font-weight:700;line-height:1.2;transition:background .2s,color .2s}
.runner-toggle[hidden]{display:none}
.runner-toggle::before{content:"";display:block;width:9px;height:12px;border-inline:3px solid currentColor}
.runner-toggle[aria-pressed="true"]::before{width:0;height:0;border:0;border-block:6px solid transparent;border-left:9px solid currentColor}
.runner-toggle:hover{background:rgba(48,54,46,.09)}
.runner-toggle:focus-visible{outline:3px solid var(--runner-charcoal);outline-offset:4px}
.runner-track{width:100%}
.runner-list{margin:0 auto;padding:0 max(24px,calc((100vw - 1324px)/2));list-style:none;display:flex;align-items:center;justify-content:space-between;gap:34px}
.runner-list li{display:flex;align-items:center;gap:17px;min-width:0}
.runner-word{font-family:'Bebas Neue','Barlow Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(26px,2.6vw,40px);font-weight:400;font-synthesis:none;letter-spacing:.09em;line-height:1.15;text-transform:uppercase;color:var(--runner-charcoal)}
.runner-number{flex:0 0 auto;display:grid;place-items:center;width:41px;height:29px;border:1px solid rgba(48,54,46,.65);border-radius:6px;font-family:Syne,Manrope,Arial,sans-serif;font-size:15px;font-weight:700;line-height:1}
.runner-divider{display:none}
.runner-list[aria-hidden="true"]{display:none}
.runner-motion .runner-viewport{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent)}
.runner-motion .runner-track{display:flex;width:max-content;animation:payroll-runner-drift var(--runner-duration) linear infinite;will-change:transform}
.runner-motion .runner-list{display:flex;flex:0 0 auto;min-width:100vw;margin:0;padding:0 38px;gap:38px;justify-content:space-around}
.runner-motion .runner-list li{flex:0 0 auto;gap:18px}
.runner-motion .runner-word{font-size:clamp(28px,3vw,40px);white-space:nowrap}
.runner-motion .runner-divider{display:block;flex:0 0 auto;width:1px;height:29px;margin-left:20px;background:rgba(48,54,46,.45);transform:skew(-16deg)}
.runner-paused .runner-track{animation-play-state:paused}
@keyframes payroll-runner-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover){.runner-motion .runner-viewport:hover .runner-track{animation-play-state:paused}}
@media(max-width:900px){
 .runner-list{flex-direction:column;align-items:stretch;gap:0;padding-inline:24px}
 .runner-list li{padding-block:15px;border-bottom:1px solid rgba(48,54,46,.2)}
 .runner-list li:last-child{border-bottom:0}
 .runner-word{font-size:30px}
 .runner-motion .runner-list{flex-direction:row;align-items:center;gap:28px;padding-inline:28px}
 .runner-motion .runner-list li{padding-block:0;border:0}
 .runner-motion .runner-divider{margin-left:15px;height:24px}
}
@media(max-width:600px){
 .payroll-runner{padding:22px 0 25px}
 .runner-topline{align-items:flex-start;gap:16px;margin-bottom:20px}
 .payroll-runner h2{font-size:17px;line-height:1.45;max-width:240px}
 .payroll-runner h2 span{display:block}
 .runner-toggle{font-size:11px;padding:10px 12px}
 .runner-number{width:35px;height:26px;font-size:13px}
 .runner-motion .runner-list li{gap:12px}
 .runner-motion .runner-word{font-size:28px}
 .runner-word{font-size:28px}
}
@media(max-width:360px){.runner-topline{flex-wrap:wrap;gap:12px}.runner-word{font-size:26px}.runner-motion .runner-word{font-size:26px}}
@media(prefers-reduced-motion:reduce){
 .runner-toggle{display:none!important}
 .runner-motion .runner-viewport{mask-image:none}
 .runner-motion .runner-track{display:block;width:100%;animation:none!important;transform:none!important;will-change:auto}
 .runner-motion .runner-list{display:flex;flex-direction:column;min-width:0;padding-inline:24px;gap:0;align-items:stretch}
 .runner-motion .runner-list li{padding-block:15px;border-bottom:1px solid rgba(48,54,46,.2);flex:auto}
 .runner-motion .runner-list li:last-child{border-bottom:0}
 .runner-motion .runner-word{font-size:28px;white-space:normal}
 .runner-motion .runner-divider,.runner-motion .runner-list[aria-hidden="true"]{display:none}
}

/* A clear, single-outline sign treatment; solid lettering remains the fallback. */
@supports (-webkit-text-stroke:1px #30362e){
 .runner-word{color:#7AB52E;-webkit-text-stroke:1px var(--runner-charcoal)}
 @media(max-width:600px){.runner-word{-webkit-text-stroke-width:1.1px;letter-spacing:.08em}}
}
@media(forced-colors:active){.runner-word{color:CanvasText;-webkit-text-stroke:0}}
@media(prefers-contrast:more){.runner-word{color:var(--runner-charcoal);-webkit-text-stroke:0}}