/* Payroll-specific accents layered over the shared workforce product system. */
.payroll-main{--hp-blue:#7057ff;--hp-cyan:#25c8ff;--hp-violet:#c638ec}
.payroll-main .pp-hero{background:radial-gradient(circle at 76% 25%,rgba(117,72,255,.34),transparent 32%),linear-gradient(125deg,#03152d,#081934 52%,#171345)}
.payroll-main .hp-product-pill{border-color:#765cff;background:rgba(94,69,255,.2);color:#c1b9ff}
.payroll-main .hp-overline,.payroll-main .hp-industries>p{color:#9187ff}
.payroll-main .hp-dashboard{border-color:rgba(132,102,255,.58)}
.payroll-main .hp-dashboard__crop img{min-height:100%;object-fit:cover;object-position:top left}
.payroll-main .hp-float{border-color:#745cff;background:linear-gradient(135deg,rgba(31,43,116,.97),rgba(21,23,70,.97))}
.payroll-main .hp-float>span,.payroll-main .hp-module-grid article:nth-child(3n)>span{background:linear-gradient(145deg,#655cff,#ad3de9)}
.payroll-main .hp-benefit-grid article>span{background:linear-gradient(145deg,#ebe7ff,#e1f5ff);color:#6655ec}
.payroll-main .hp-tabs button[aria-selected="true"]{background:linear-gradient(105deg,#655cff,#8b49ed)}
.payroll-main .hp-process__steps li>span{border-color:#795cff;box-shadow:0 0 0 7px rgba(102,76,255,.13),0 0 18px rgba(134,64,255,.55)}
.payroll-main .hp-final__card{background:linear-gradient(110deg,#f1efff,#edf5ff 55%,#e8e3ff)}
@media(max-width:760px){
  .payroll-main .hp-dashboard__crop img{object-position:top left}
  .payroll-main .hp-phone{right:-5px;bottom:42px;width:148px;height:310px;padding:28px 13px 15px;border-width:5px;border-radius:28px}
  .payroll-main .hp-phone p{margin:49px 0 5px}
  .payroll-main .hp-phone>strong{font-size:24px}
  .payroll-main .hp-phone__button{margin-top:35px}
  .payroll-main .hp-final__card{min-height:600px}
  .payroll-main .hp-final__visual{height:32%}
  .payroll-main .hp-final__visual>img{width:58%;height:105%}
}
@media(max-width:360px){.payroll-main .hp-float{width:160px;grid-template-columns:34px 1fr;gap:8px;padding:9px}.payroll-main .hp-float>span{width:32px;height:32px}}

/* Reference hero: laptop, mobile payslip, status cards, and business strip. */
.payroll-main .pp-hero>.pd-shell{width:min(1320px,calc(100% - 40px))}
.payroll-main .pp-hero{position:relative;overflow:hidden;padding:40px 0 18px;background:radial-gradient(circle at 73% 35%,rgba(0,112,255,.34),transparent 31%),radial-gradient(circle at 98% 50%,rgba(152,35,237,.45),transparent 30%),linear-gradient(120deg,#02162e,#061b3d 58%,#19104f)}
.payroll-main .pp-hero::before{background:linear-gradient(90deg,rgba(47,145,255,.09) 1px,transparent 1px),linear-gradient(rgba(47,145,255,.09) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.82) 72%,transparent)}
.payroll-main .pp-hero::after{content:"";position:absolute;right:0;bottom:120px;width:55%;height:4px;background:linear-gradient(90deg,transparent,#1ba9ff 42%,#b12cff);box-shadow:0 0 30px #168dff,0 0 60px rgba(165,38,255,.75);transform:skewY(-7deg);transform-origin:right;pointer-events:none}
.pp-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:.98fr 1.02fr;gap:30px;align-items:center;min-height:540px}
.pp-hero__copy{position:relative;z-index:6;padding:34px 0 24px}.pp-hero__copy h1{max-width:640px;margin:21px 0 0;color:#fff;font-size:clamp(48px,3.9vw,60px);line-height:1.02;letter-spacing:-.055em}.pp-hero__copy h1 span{background:linear-gradient(90deg,#28cbff,#3086ff 48%,#d337e8);-webkit-background-clip:text;background-clip:text;color:transparent}.pp-hero__copy .hp-lead{max-width:610px;margin-top:22px;font-size:17px}.pp-hero__copy .hp-actions{margin-top:28px}.pp-hero__copy .hp-btn{min-width:190px}
.pp-hero__proof{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px}.pp-hero__proof>div{min-width:0;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:0 16px;border-left:1px solid rgba(112,159,222,.28)}.pp-hero__proof>div:first-child{padding-left:0;border-left:0}.pp-hero__proof>div>span{width:31px;height:31px;display:grid;place-items:center;border:1px solid #258aff;border-radius:50%;background:rgba(16,75,150,.52);color:#75caff}.pp-hero__proof strong,.pp-hero__proof small{display:block}.pp-hero__proof strong{color:#f0f5ff;font-size:11px;line-height:1.3}.pp-hero__proof small{margin-top:5px;color:#94aac6;font-size:9px;line-height:1.45}
.pp-hero__visual{position:relative;z-index:3;min-width:0;min-height:520px}.pp-laptop{position:absolute;z-index:3;top:146px;left:3%;width:82%;filter:drop-shadow(0 35px 38px rgba(0,0,0,.48));transform:perspective(1200px) rotateY(-3deg) rotateZ(-1deg);transform-origin:center bottom}.pp-laptop__screen{position:relative;height:326px;overflow:hidden;padding:12px 12px 0;border:3px solid #22365f;border-bottom-width:10px;border-radius:18px 18px 8px 8px;background:#07152d;box-shadow:0 0 0 1px #5a74da,0 0 35px rgba(31,122,255,.42)}.pp-laptop__screen img{display:block;width:100%;height:100%;border-radius:7px 7px 0 0;object-fit:cover;object-position:top left}.pp-laptop__camera{position:absolute;z-index:2;top:5px;left:50%;width:4px;height:4px;border-radius:50%;background:#6d7893;transform:translateX(-50%)}.pp-laptop__base{position:relative;width:108%;height:19px;margin-left:-4%;border-radius:3px 3px 50% 50%;background:linear-gradient(#7588b4,#1b2b51 45%,#071226);box-shadow:0 10px 15px rgba(0,0,0,.55)}.pp-laptop__base::after{content:"";position:absolute;top:2px;left:42%;width:16%;height:4px;border-radius:0 0 7px 7px;background:#9baad0}
.pp-signal{position:absolute;z-index:5;display:grid;grid-template-columns:44px minmax(0,1fr) 21px;gap:10px;align-items:center;width:220px;padding:12px;border:1px solid rgba(84,132,255,.72);border-radius:12px;background:linear-gradient(135deg,rgba(12,64,133,.95),rgba(31,28,102,.92));box-shadow:0 15px 35px rgba(0,0,0,.3),inset 0 0 25px rgba(51,114,255,.09);transform:rotate(-3deg)}.pp-signal>span{width:44px;height:44px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#168df3,#2749b2);color:#fff}.pp-signal>span svg{width:24px;height:24px}.pp-signal p{min-width:0;margin:0}.pp-signal strong,.pp-signal small{display:block}.pp-signal strong{color:#fff;font-size:11px;line-height:1.25}.pp-signal small{margin-top:4px;color:#9cb2d0;font-size:8px;line-height:1.3}.pp-signal>i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#2cda92;color:#fff;font-style:normal}.pp-signal>i svg{width:12px;height:12px}.pp-signal--ready{top:22px;left:0}.pp-signal--review{top:14px;left:42%;width:238px;transform:rotate(-2deg)}.pp-signal--review>span{background:linear-gradient(145deg,#7c4eff,#233ba5)}.pp-signal--review>i{background:#d247ec}.pp-signal--payslip{top:75px;right:-2%;width:190px;transform:rotate(-4deg)}.pp-signal--payslip>i{background:#27bff2}
.payroll-main .pp-hero__phone{z-index:6;right:-1%;bottom:18px;width:148px;height:310px;padding:28px 13px 15px;border-width:5px;border-radius:28px}.payroll-main .pp-hero__phone p{margin:49px 0 5px}.payroll-main .pp-hero__phone>strong{font-size:24px}.payroll-main .pp-hero__phone .hp-phone__button{margin-top:35px}
.pp-business-strip{position:relative;z-index:4;display:grid;grid-template-columns:1.15fr 1.85fr;align-items:center;min-height:132px;margin-top:4px;padding:20px 28px;border:1px solid rgba(71,129,221,.3);border-radius:13px;background:radial-gradient(circle at 100% 0,rgba(128,40,218,.22),transparent 35%),linear-gradient(110deg,rgba(7,58,111,.9),rgba(13,29,80,.9));box-shadow:0 18px 45px rgba(0,0,0,.18)}.pp-business-strip__intro{display:grid;grid-template-columns:58px 1fr;gap:17px;align-items:center;padding-right:30px}.pp-business-strip__intro>span{width:58px;height:58px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#288bff,#a12fee);box-shadow:0 12px 28px rgba(79,65,255,.34)}.pp-business-strip__intro>span svg{width:29px;height:29px}.pp-business-strip__intro p{margin:0 0 4px;color:#7dbbff;font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.pp-business-strip__intro strong,.pp-business-strip__intro small{display:block}.pp-business-strip__intro strong{font-size:21px}.pp-business-strip__intro small{max-width:390px;margin-top:6px;color:#9db0ca;font-size:10px;line-height:1.45}.pp-business-strip ul{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0;padding:0 0 0 30px;border-left:1px solid rgba(108,150,210,.25);list-style:none}.pp-business-strip li{display:grid;justify-items:center;gap:7px;color:#d5def0;font-size:9px;line-height:1.25;text-align:center}.pp-business-strip li>span{width:42px;height:42px;display:grid;place-items:center;border-radius:9px;background:rgba(23,79,149,.45);color:#83bdff;box-shadow:inset 0 0 0 1px rgba(62,126,218,.18)}
@media(max-width:1100px){.pp-hero__grid{grid-template-columns:1fr;padding-top:10px}.pp-hero__copy{max-width:760px}.pp-hero__visual{width:min(820px,100%);min-height:570px;margin:auto}.pp-laptop{left:7%;width:78%}.pp-signal--ready{left:3%}.pp-signal--payslip{right:1%}.pp-business-strip{grid-template-columns:1fr}.pp-business-strip__intro{padding:0 0 20px}.pp-business-strip ul{padding:20px 0 0;border-top:1px solid rgba(108,150,210,.25);border-left:0}}
@media(max-width:760px){.payroll-main .pp-hero{padding-top:22px}.pp-hero__grid{gap:10px}.pp-hero__copy{padding:12px 0 20px}.pp-hero__copy h1{font-size:clamp(44px,12vw,58px)}.pp-hero__copy .hp-lead{font-size:15px}.pp-hero__copy .hp-btn{width:100%}.pp-hero__proof{grid-template-columns:1fr;gap:12px}.pp-hero__proof>div,.pp-hero__proof>div:first-child{padding:0;border-left:0}.pp-hero__visual{min-height:610px}.pp-signal{width:190px}.pp-signal--ready{top:6px;left:0}.pp-signal--review{top:78px;left:auto;right:0;width:205px}.pp-signal--payslip{top:148px;right:auto;left:18px;width:180px}.pp-laptop{top:244px;left:0;width:91%;transform:perspective(1200px) rotateY(-2deg) rotateZ(-1deg)}.pp-laptop__screen{height:250px;padding:8px 8px 0;border-width:2px;border-bottom-width:8px;border-radius:13px 13px 6px 6px}.payroll-main .pp-hero__phone{right:-5px;bottom:27px}.pp-business-strip{padding:20px}.pp-business-strip ul{grid-template-columns:repeat(3,1fr);gap:18px 8px}}
@media(max-width:460px){.pp-hero__copy h1{font-size:clamp(42px,12.3vw,52px)}.pp-hero__visual{min-height:635px}.pp-signal{grid-template-columns:38px minmax(0,1fr) 18px;padding:9px}.pp-signal>span{width:38px;height:38px}.pp-signal--ready{width:184px}.pp-signal--review{width:195px}.pp-signal--payslip{width:174px}.pp-laptop{top:238px;width:94%}.pp-laptop__screen{height:235px}.payroll-main .pp-hero__phone{bottom:31px}.pp-business-strip__intro{grid-template-columns:48px 1fr}.pp-business-strip__intro>span{width:48px;height:48px}.pp-business-strip__intro strong{font-size:18px}.pp-business-strip ul{padding-top:18px}.pp-business-strip li{font-size:8px}}

/* Code-built device interfaces mirror the supplied laptop and phone artwork. */
.pp-payroll-ui{height:100%;display:grid;grid-template-columns:19% 81%;overflow:hidden;border-radius:7px 7px 0 0;background:#f5f7ff;color:#17213c;font-size:8px;font-family:Inter,system-ui,sans-serif;text-align:left}
.pp-payroll-ui svg{width:1.2em;height:1.2em}.pp-payroll-ui aside{display:grid;align-content:start;gap:.8em;padding:1.6em .9em;background:linear-gradient(180deg,#06152e,#071b3b);color:#94a9c6}.pp-payroll-ui aside>b{display:grid;grid-template-columns:2.3em 1fr;align-items:center;margin:0 0 1.4em;color:#fff;font-size:1.2em;line-height:1}.pp-payroll-ui aside>b i{grid-row:1/3;display:grid;place-items:center;width:2em;height:2em;border-radius:.55em;background:linear-gradient(145deg,#13b7ff,#7257ff);font-style:normal}.pp-payroll-ui aside>b small{font-size:.45em;letter-spacing:.16em}.pp-payroll-ui aside>span{display:flex;align-items:center;gap:.7em;min-height:2.7em;padding:.45em .7em;border-radius:.55em;font-size:.82em}.pp-payroll-ui aside>span.is-active{background:linear-gradient(100deg,#147ce8,#4957dd);color:#fff;font-weight:800}
.pp-payroll-ui__workspace{min-width:0;display:grid;grid-template-rows:12% 88%}.pp-payroll-ui__workspace>header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5em;background:linear-gradient(100deg,#182342,#27214e);color:#fff}.pp-payroll-ui__workspace>header span b,.pp-payroll-ui__workspace>header span small{display:block}.pp-payroll-ui__workspace>header span b{font-size:1em}.pp-payroll-ui__workspace>header span small{margin-top:.15em;color:#97abc8;font-size:.65em}.pp-payroll-ui__workspace>header div{display:flex;gap:.55em}.pp-payroll-ui__workspace>header div i{width:1.6em;height:1.6em;border-radius:50%;background:#303d68}.pp-payroll-ui__workspace main{min-width:0;padding:1.6em;background:linear-gradient(145deg,#f8f9ff,#eef2ff)}
.pp-payroll-ui__title{display:flex;align-items:center;justify-content:space-between;gap:1em}.pp-payroll-ui__title span strong,.pp-payroll-ui__title span small{display:block}.pp-payroll-ui__title span strong{font-size:1.8em}.pp-payroll-ui__title span small{margin-top:.25em;color:#6f7f99;font-size:.7em}.pp-payroll-ui__title>div{display:flex;align-items:center;gap:.6em}.pp-payroll-ui__title>div>b{padding:.75em 1em;border:1px solid #dbe2f1;border-radius:.6em;background:#fff;font-size:.72em}.pp-payroll-ui__title button{border:0;border-radius:.65em;padding:.85em 1.25em;background:linear-gradient(105deg,#2985ff,#a833e8);color:#fff;font:inherit;font-size:.72em;font-weight:850}
.pp-payroll-ui__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;margin-top:1.5em}.pp-payroll-ui__kpis>span{display:grid;grid-template-columns:2.1em 1fr;align-items:center;padding:1em;border-radius:.8em;background:#fff;box-shadow:0 .5em 1.8em rgba(30,56,109,.09)}.pp-payroll-ui__kpis i{grid-row:1/3;width:1.8em;height:1.8em;display:grid;place-items:center;margin-right:.4em;border-radius:.5em;background:#e7f1ff;color:#257fff}.pp-payroll-ui__kpis b{font-size:1.05em}.pp-payroll-ui__kpis small{color:#7c8ba3;font-size:.55em;text-transform:uppercase}
.pp-payroll-ui__table{margin-top:1.3em;overflow:hidden;border:1px solid #e1e6f2;border-radius:.8em;background:#fff}.pp-payroll-ui__table-head{display:grid;grid-template-columns:1fr auto auto;gap:.7em;align-items:center;padding:.8em 1em;border-bottom:1px solid #e4e8f1}.pp-payroll-ui__table-head strong{font-size:.9em}.pp-payroll-ui__table-head strong small{margin-left:.4em;color:#7b8ba2;font-size:.65em;font-weight:600}.pp-payroll-ui__table-head>span{padding:.55em .75em;border:1px solid #e3e8f2;border-radius:.55em;color:#8b98ac;font-size:.62em}.pp-payroll-ui__row{display:grid;grid-template-columns:1.5fr 1fr repeat(3,.86fr) .65fr;gap:.6em;align-items:center;min-height:3.3em;padding:0 1em;border-bottom:1px solid #edf0f6;font-size:.67em}.pp-payroll-ui__row:last-child{border-bottom:0}.pp-payroll-ui__row--labels{min-height:2.7em;color:#7a899e;font-size:.57em;text-transform:uppercase}.pp-payroll-ui__row>i{width:max-content;padding:.4em .65em;border-radius:99px;background:#cff5df;color:#16844e;font-style:normal;font-weight:800}
.payroll-main .pp-hero__phone{overflow:hidden;background:#091b43;color:#fff;text-align:left}.pp-mobile-ui{height:100%;display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif}.pp-mobile-ui__status{display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:#dfe8ff;font-size:6px}.pp-mobile-ui__status span{letter-spacing:1px}.pp-mobile-ui header{display:grid;grid-template-columns:25px 1fr;gap:6px;align-items:center;margin-top:10px}.pp-mobile-ui header>i{width:25px;height:25px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:linear-gradient(145deg,#ffb46a,#a24fff);font-size:6px;font-style:normal;font-weight:850}.pp-mobile-ui header strong,.pp-mobile-ui header small{display:block}.pp-mobile-ui header strong{font-size:8px}.pp-mobile-ui header small{margin-top:2px;color:#a8b9d4;font-size:5px}.pp-mobile-ui__payslip{margin-top:11px;padding:9px 8px;border-radius:8px;background:#fff;color:#1a2b4a;box-shadow:0 7px 18px rgba(0,0,0,.22)}.pp-mobile-ui__payslip>div{display:grid;grid-template-columns:1fr 18px;align-items:center;margin-bottom:6px}.pp-mobile-ui__payslip>div strong,.pp-mobile-ui__payslip>div small{display:block}.pp-mobile-ui__payslip>div strong{font-size:8px}.pp-mobile-ui__payslip>div small{font-size:6px}.pp-mobile-ui__payslip>div>b{grid-column:2;grid-row:1/3;width:18px;height:18px;display:grid;place-items:center;border-radius:5px;background:#e9f4ff;color:#147cff;font-size:9px}.payroll-main .pp-mobile-ui__payslip p{display:flex;justify-content:space-between;margin:0;padding:5px 0;border-top:1px solid #edf1f7;font-size:6px}.pp-mobile-ui__payslip p span{color:#71819a}.pp-mobile-ui__payslip p.is-net{margin:2px -3px -2px;padding:6px 4px;border:0;border-radius:5px;background:#dff0ff;color:#0758ae}.pp-mobile-ui ul{display:grid;gap:0;margin:9px 0 0;padding:0;list-style:none}.pp-mobile-ui li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;min-height:26px;border-top:1px solid rgba(112,150,207,.2);color:#c3d2e8;font-size:5.5px}.pp-mobile-ui li svg{width:10px;height:10px;color:#46a7ff}.pp-mobile-ui li b{font-size:10px;color:#7189aa}
@media(max-width:760px){.pp-payroll-ui{font-size:5.7px}.pp-payroll-ui__table-head>span:first-of-type{display:none}.pp-payroll-ui__row{grid-template-columns:1.4fr .85fr repeat(2,.8fr) .65fr}.pp-payroll-ui__row>*:nth-child(4){display:none}}

/* Exact supplied 1672 x 941 hero artwork; the bitmap is not redrawn or recompressed. */
.pp-reference-hero{position:relative;overflow:hidden;background:#031331;line-height:0}
.pp-reference-hero__image{display:block;width:100%;height:auto}
.pp-reference-hero__semantic{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.pp-reference-hero__links{position:absolute;inset:0;z-index:2;pointer-events:none}
.pp-reference-link{position:absolute;display:block;border-radius:8px;pointer-events:auto;text-decoration:none}
.pp-reference-link span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pp-reference-link:focus-visible{outline:4px solid #6ee7ff;outline-offset:4px;background:rgba(31,185,255,.12)}
.pp-reference-link--home{left:21.7%;top:2.1%;width:4.8%;height:5.9%}
.pp-reference-link--products{left:27.2%;top:2.1%;width:7.7%;height:5.9%}
.pp-reference-link--pricing-nav{left:36.1%;top:2.1%;width:5.3%;height:5.9%}
.pp-reference-link--signin{left:80.3%;top:2.1%;width:5.4%;height:5.9%}
.pp-reference-link--signup{left:86.5%;top:1.6%;width:8.8%;height:6.5%}
.pp-reference-link--demo{left:5.3%;top:54.6%;width:20%;height:8.6%}
.pp-reference-link--pricing-hero{left:25.9%;top:54.6%;width:13.6%;height:8.6%}
@media(max-width:760px){
  .pp-reference-link--home,.pp-reference-link--products,.pp-reference-link--pricing-nav,.pp-reference-link--signin,.pp-reference-link--signup{display:none}
  .pp-reference-link--demo,.pp-reference-link--pricing-hero{top:50%;min-height:44px}
}

/* Element-based hero: only the product device composition remains an image. */
.payroll-main .pp-hero::after{display:none}
.pp-hero__device-art{position:absolute;top:-8px;left:-12%;width:126%;max-width:none;height:auto;display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 100%)}
@media(max-width:1100px){
  .pp-hero__visual{min-height:560px}
  .pp-hero__device-art{top:0;left:0;width:100%;max-width:940px;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:760px){
  .pp-hero__visual{min-height:330px}
  .pp-hero__device-art{top:8px;left:-10%;width:120%}
}
@media(max-width:460px){
  .pp-hero__visual{min-height:285px}
  .pp-hero__device-art{top:12px;left:-14%;width:128%}
}