/* ============================================================
   Payrollers — editorial layout. No card grid: hairline rules,
   oversized ghost numerals, a rotated label per band, a directory
   that opens under the pointer, and letterforms that fill.
   Loads after home.css.
   ============================================================ */

.py-page{--py:#5c60ac;--py-deep:#44478a;--py-soft:#8a8ed4;}

/* ---------- Reading progress ---------- */
.py-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;}
.py-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--py),var(--py-soft));}

/* ============================================================
   HERO
   ============================================================ */
.py-hero{position:relative;overflow:hidden;isolation:isolate;}
.py-stripes{position:absolute;inset:-30%;z-index:-1;opacity:.12;pointer-events:none;
	background:repeating-linear-gradient(115deg,rgba(255,255,255,.9) 0 2px,transparent 2px 22px);
	animation:py-slide 22s linear infinite;}
@keyframes py-slide{to{transform:translateX(88px)}}
.py-orb{position:absolute;inset:-25% -12%;z-index:-1;pointer-events:none;}
.py-orb i{position:absolute;display:block;border-radius:50%;filter:blur(46px);will-change:transform;}
.py-orb i:nth-child(1){width:42vw;height:42vw;top:-10%;right:-4%;background:radial-gradient(circle,rgba(255,255,255,.32),transparent 68%);}
.py-orb i:nth-child(2){width:30vw;height:30vw;bottom:-14%;left:-4%;background:radial-gradient(circle,rgba(28,27,60,.32),transparent 70%);}

/* The product name set on its side, running up the left edge. */
.py-hero__edge{position:absolute;left:14px;top:50%;z-index:1;
	writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
	font-size:12px;font-weight:700;letter-spacing:.42em;color:rgba(255,255,255,.34);
	pointer-events:none;user-select:none;}
body.am .py-hero h1{letter-spacing:-0.035em;}

.py-stats{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);margin:clamp(26px,3vw,38px) 0 0;padding:0;}
.py-stats li{display:flex;align-items:baseline;gap:9px;position:relative;padding-right:clamp(16px,3vw,40px);}
.py-stats li + li::before{content:"";position:absolute;left:calc(-1 * clamp(8px,1.5vw,20px));top:.18em;bottom:.18em;width:1px;background:rgba(255,255,255,.3);}
.py-stats b{font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--app-ink);font-variant-numeric:tabular-nums;}
.py-stats span{font-size:14px;font-weight:600;color:var(--app-muted);}
.as-anim .py-stats li{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
.as-ready .py-stats li{opacity:1;transform:none;}
.as-ready .py-stats li:nth-child(1){transition-delay:.42s;}
.as-ready .py-stats li:nth-child(2){transition-delay:.53s;}
.as-ready .py-stats li:nth-child(3){transition-delay:.64s;}

/* ============================================================
   BAND — the page's repeating frame: a hairline top rule, a
   rotated label in the margin, a ghost numeral behind the title
   ============================================================ */
.py-band{position:relative;border-top:1px solid var(--line);}
.py-band--tint{background:var(--bg-2);}
.py-band--dark{background:var(--py-deep);color:rgba(255,255,255,.78);border-top-color:rgba(255,255,255,.16);}
body.am .py-band--dark h2,body.am .py-band--dark h3{color:#fff;}
.py-band--dark .py-band__label{color:rgba(255,255,255,.3);}
.py-band--dark .py-band__num{color:rgba(255,255,255,.08);}
.py-band--dark .py-band__head p{color:rgba(255,255,255,.7);}

.py-band__wrap{position:relative;}
.py-band__label{position:absolute;left:calc(-1 * clamp(14px,2.4vw,44px));top:4px;
	writing-mode:vertical-rl;font-size:11px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
	color:color-mix(in srgb,var(--ink) 34%,transparent);pointer-events:none;user-select:none;}
@media (max-width:1180px){.py-band__label{display:none;}}

.py-band__head{position:relative;max-width:62ch;margin-bottom:clamp(30px,4vw,54px);}
.py-band__num{position:absolute;right:0;top:-.34em;z-index:-1;
	font-size:clamp(90px,13vw,190px);font-weight:700;line-height:.8;letter-spacing:-0.05em;
	color:color-mix(in srgb,var(--py) 9%,transparent);pointer-events:none;user-select:none;}
.py-band__num--sm{position:static;display:block;font-size:clamp(54px,7vw,90px);margin-bottom:-.18em;}
body.am .py-band__head h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-0.035em;line-height:1.08;}
.py-band__head p{margin-top:14px;font-size:17px;line-height:1.65;color:var(--muted);}

/* ============================================================
   01 · REASONS — ruled lines, a letter in the margin,
   the rule sweeps to indigo on hover
   ============================================================ */
.py-reasons{list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));column-gap:clamp(28px,4vw,64px);}
.py-reasons li{position:relative;display:flex;align-items:baseline;gap:16px;
	padding:clamp(15px,1.7vw,20px) 0;border-bottom:1px solid var(--line);
	font-size:clamp(17px,1.9vw,21px);font-weight:600;letter-spacing:-0.015em;color:var(--ink);
	transition:color .3s ease,padding-left .4s cubic-bezier(.2,.8,.2,1);}
.py-reasons li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--py);
	transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1);}
.py-reasons em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--py);flex:0 0 auto;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.py-reasons li:hover{color:var(--py-deep);padding-left:10px;}
.py-reasons li:hover::after{transform:scaleX(1);}
.py-reasons li:hover em{transform:translateX(-6px) scale(1.15);}
}

/* ============================================================
   02 · STEPS — a staircase with a drawn connector
   ============================================================ */
.py-steps{list-style:none;margin:0;padding:0;position:relative;--p:0;}
.py-steps::before,.py-steps::after{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;}
.py-steps::before{background:rgba(255,255,255,.18);}
.py-steps::after{height:calc((100% - 20px) * var(--p));bottom:auto;
	background:linear-gradient(180deg,var(--py-soft),#fff);transition:height .12s linear;}
.py-steps li{position:relative;padding:0 0 clamp(22px,3vw,40px) clamp(30px,4vw,56px);
	margin-left:calc(var(--s) * clamp(8px,2.2vw,42px));
	transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.py-steps li:last-child{padding-bottom:0;}
.py-steps li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;
	background:var(--py-deep);border:2px solid rgba(255,255,255,.45);
	transition:background-color .4s ease,transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s ease;}
.py-steps li.as-in::before{background:#fff;border-color:#fff;transform:scale(1.18);}
.py-steps li::after{content:"";position:absolute;left:12px;top:17px;width:clamp(18px,3vw,40px);height:1px;
	background:rgba(255,255,255,.3);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1) .1s;}
.py-steps li.as-in::after{transform:scaleX(1);}
.as-anim .py-steps li.as-rv{opacity:0;transform:translateX(-24px);}
.as-anim .py-steps li.as-rv.as-in{opacity:1;transform:none;}
.py-steps__k{display:block;margin-bottom:6px;font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--py-soft);}
body.am .py-steps h3{font-size:clamp(22px,2.8vw,34px);letter-spacing:-0.03em;margin-bottom:6px;}
.py-steps p{font-size:16px;line-height:1.62;max-width:56ch;margin:0;color:rgba(255,255,255,.72);}
@media (hover:hover){
.py-steps li:hover{transform:translateX(8px);}
.py-steps li:hover::before{transform:scale(1.5);}
}

/* ============================================================
   03 · DIRECTORY — ruled rows that open under the pointer
   ============================================================ */
.py-dir{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.py-dir__row{position:relative;
	display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:clamp(14px,2vw,26px);
	padding:clamp(16px,1.9vw,24px) 0;border-bottom:1px solid var(--line);
	transition:padding-left .45s cubic-bezier(.2,.8,.2,1);}
.py-dir__row::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;
	background:color-mix(in srgb,var(--py) 6%,transparent);
	transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.py-dir__n{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--py);font-variant-numeric:tabular-nums;
	transition:transform .4s cubic-bezier(.2,.8,.2,1);}
body.am .py-dir h3{font-size:clamp(18px,2.1vw,25px);letter-spacing:-0.025em;margin:0;
	transition:color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1);}
.py-dir__mark{position:relative;width:15px;height:15px;flex:0 0 auto;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.py-dir__mark::before,.py-dir__mark::after{content:"";position:absolute;background:var(--py);border-radius:2px;}
.py-dir__mark::before{left:0;right:0;top:6.5px;height:2px;}
.py-dir__mark::after{top:0;bottom:0;left:6.5px;width:2px;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.py-dir__more{grid-column:2 / -1;display:grid;grid-template-rows:0fr;
	transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1);}
.py-dir__more > div{overflow:hidden;}
.py-dir__more p{margin:12px 0 0;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:66ch;}
.py-dir__tags{list-style:none;display:flex;flex-wrap:wrap;gap:0 18px;margin:12px 0 2px;padding:0;}
.py-dir__tags li{position:relative;padding-left:14px;font-size:13.5px;font-weight:600;color:var(--py-deep);line-height:1.9;}
.py-dir__tags li::before{content:"";position:absolute;left:0;top:.82em;width:5px;height:5px;border-radius:50%;background:var(--py);}
@media (hover:hover){
.py-dir__row:hover{padding-left:clamp(10px,1.4vw,22px);}
.py-dir__row:hover::before{transform:scaleY(1);}
.py-dir__row:hover .py-dir__n{transform:translateY(-2px) scale(1.15);}
.py-dir__row:hover h3{color:var(--py-deep);}
.py-dir__row:hover .py-dir__mark{transform:rotate(90deg);}
.py-dir__row:hover .py-dir__mark::after{transform:scaleY(0);}
.py-dir__row:hover .py-dir__more{grid-template-rows:1fr;}
}
/* Touch and keyboard: the detail is always there. */
@media (hover:none){
.py-dir__more{grid-template-rows:1fr;}
.py-dir__mark{display:none;}
}

/* ============================================================
   04 · DUO — a pinging signal, and a ruled receipt
   ============================================================ */
.py-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(30px,5vw,80px);align-items:start;}
body.am .py-geo h2{font-size:clamp(24px,3vw,36px);letter-spacing:-0.03em;margin-bottom:20px;}
.py-geo__viz{position:relative;height:180px;display:grid;place-items:center;margin-bottom:22px;}
.py-geo__viz b{width:16px;height:16px;border-radius:50%;background:var(--py);position:relative;z-index:1;}
.py-geo__viz span{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid var(--py);opacity:0;
	animation:py-ping 3.2s cubic-bezier(.2,.7,.4,1) infinite;}
.py-geo__viz span:nth-child(2){animation-delay:1.05s;}
.py-geo__viz span:nth-child(3){animation-delay:2.1s;}
@keyframes py-ping{0%{transform:scale(.6);opacity:.85}70%{opacity:.18}100%{transform:scale(3.6);opacity:0}}
.py-geo__list{list-style:none;margin:0;padding:0;}
.py-geo__list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink);
	transition:transform .35s cubic-bezier(.2,.8,.2,1),color .3s ease;}
@media (hover:hover){.py-geo__list li:hover{transform:translateX(8px);color:var(--py-deep);}}

.py-slip{border-top:2px solid var(--py);padding-top:20px;}
.py-slip__top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--py);padding-bottom:14px;border-bottom:1px solid var(--line);}
.py-slip__rows{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;}
.py-slip__rows li{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:14px;font-size:14.5px;color:var(--muted);}
.py-slip__rows i{display:block;height:8px;border-radius:99px;background:color-mix(in srgb,var(--py) 14%,transparent);position:relative;overflow:hidden;}
.py-slip__rows i::after{content:"";position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,var(--py),var(--py-soft));
	transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.as-anim .py-slip.as-in .py-slip__rows i::after{transform:scaleX(1);}
.as-anim .py-slip.as-in .py-slip__rows li:nth-child(1) i::after{transition-delay:.10s;}
.as-anim .py-slip.as-in .py-slip__rows li:nth-child(2) i::after{transition-delay:.22s;}
.as-anim .py-slip.as-in .py-slip__rows li:nth-child(3) i::after{transition-delay:.34s;}
.as-anim .py-slip.as-in .py-slip__rows li:nth-child(4) i::after{transition-delay:.46s;}
.as-anim .py-slip.as-in .py-slip__rows li:nth-child(5) i::after{transition-delay:.58s;}
.py-slip__net{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);}
.py-slip__net span{font-size:14px;font-weight:600;color:var(--ink);}
.py-slip__net b{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-0.035em;color:var(--py-deep);font-variant-numeric:tabular-nums;}
.py-slip__cap{margin-top:14px;font-size:14px;line-height:1.6;color:var(--muted);}

/* ============================================================
   05 · LETTERFORMS — outline type that fills on hover
   ============================================================ */
.py-letters{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.py-letters li{display:flex;align-items:baseline;gap:clamp(16px,3vw,44px);flex-wrap:wrap;
	padding:clamp(10px,1.4vw,18px) 0;border-bottom:1px solid var(--line);}
.py-letters b{font-size:clamp(44px,8vw,104px);font-weight:700;line-height:.95;letter-spacing:-0.05em;
	color:transparent;-webkit-text-stroke:2px var(--py);
	transition:color .45s ease,-webkit-text-stroke-color .45s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
.py-letters span{font-size:clamp(14px,1.6vw,18px);font-weight:600;color:var(--muted);transition:color .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.py-letters li:hover b{color:var(--py);transform:translateY(-4px);}
.py-letters li:hover span{color:var(--py-deep);transform:translateX(8px);}
}

/* ============================================================
   06 · LEDGER — ruled lines that tick in sequence
   ============================================================ */
.py-ledger{list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:clamp(28px,4vw,64px);}
.py-ledger li{display:flex;align-items:center;gap:15px;padding:clamp(13px,1.5vw,17px) 0;
	border-bottom:1px solid rgba(255,255,255,.16);
	font-size:clamp(16px,1.8vw,19px);font-weight:600;color:#fff;
	transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.py-ledger i{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;flex:0 0 auto;
	border:2px solid rgba(255,255,255,.4);color:var(--py-deep);background:transparent;
	transition:background-color .4s ease,border-color .4s ease;}
.py-ledger i svg path{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .45s ease;}
.as-anim .py-ledger.as-in li i{background:#fff;border-color:#fff;transition-delay:calc(var(--i,0)*95ms);}
.as-anim .py-ledger.as-in li i svg path{stroke-dashoffset:0;transition-delay:calc(var(--i,0)*95ms + .14s);}
html:not(.as-anim) .py-ledger li i{background:#fff;border-color:#fff;}
html:not(.as-anim) .py-ledger li i svg path{stroke-dashoffset:0;}
@media (hover:hover){.py-ledger li:hover{transform:translateX(8px);}}
.py-ledger__note{margin-top:clamp(22px,3vw,34px);font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);max-width:60ch;}

/* ============================================================
   07 · END — full bleed, oversized, no panel
   ============================================================ */
.py-end{position:relative;background:var(--py);color:#fff;overflow:hidden;isolation:isolate;
	padding-block:clamp(64px,9vw,130px);
	clip-path:polygon(0 clamp(20px,4vw,64px),100% 0,100% 100%,0 100%);}
.py-end::before{content:"";position:absolute;inset:-50%;z-index:-1;
	background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,255,255,.14) 76%,transparent 90%);
	animation:py-turn 20s linear infinite;}
@keyframes py-turn{to{rotate:360deg}}
.py-end__kicker{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px;}
body.am .py-end h2{font-size:clamp(34px,6.4vw,84px);line-height:1.02;letter-spacing:-0.045em;color:#fff;}
.py-end h2 em{font-style:normal;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);}
.py-end__lead{margin-top:clamp(20px,3vw,32px);max-width:58ch;font-size:17px;line-height:1.68;color:rgba(255,255,255,.8);}
.py-end__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3.4vw,42px);}
.py-end__btn{--tx:0px;--ty:0px;gap:10px;min-height:52px;}
.py-js .py-end__btn{transform:translate(var(--tx),var(--ty));transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.py-end__btn i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){.py-end__btn:hover i{transform:translateX(7px);}}
.py-end__back{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:rgba(255,255,255,.72);}
.py-end__back:hover{color:#fff;}

@media (max-width:640px){
.py-slip__rows li{grid-template-columns:96px 1fr;}
.py-stats{gap:14px 20px;}
.py-stats li{padding-right:14px;}
.py-steps li{margin-left:0;}
.py-dir__row{grid-template-columns:auto 1fr;}
.py-dir__more{grid-column:1 / -1;}
.py-hero__edge{display:none;}
.py-band__num{font-size:clamp(70px,22vw,110px);}
}

/* ---------- Static fallback ---------- */
@media (prefers-reduced-motion:reduce){
.py-stripes,.py-prog{display:none;}
.py-orb i,.py-geo__viz span,.py-end::before{animation:none;}
.py-geo__viz span{opacity:.3;}
.py-ledger i svg path{stroke-dashoffset:0;}
.py-ledger li i{background:#fff;border-color:#fff;}
.py-slip__rows i::after{transform:scaleX(1);}
.py-steps::after{transition:none;}
.py-dir__more{grid-template-rows:1fr;}
.py-reasons li,.py-reasons li::after,.py-reasons em,.py-steps li,.py-dir__row,.py-dir__row::before,
.py-dir__n,.py-dir h3,.py-dir__mark,.py-dir__more,.py-geo__list li,.py-letters b,.py-letters span,
.py-ledger li,.py-end__btn,.py-end__btn i{transition:none;}
.py-reasons li:hover,.py-steps li:hover,.py-letters li:hover b,.py-ledger li:hover,.py-geo__list li:hover{transform:none;}
.as-anim .py-stats li{opacity:1;transform:none;}
}

/* The directory must never be able to trap its own detail: below the
   three-across width, and for keyboard users, every row is already open. */
@media (max-width:900px){
.py-dir__more{grid-template-rows:1fr;}
.py-dir__mark{display:none;}
.py-dir__row{grid-template-columns:auto 1fr;}
.py-dir__more{grid-column:1 / -1;}
}
.py-dir__row:focus-within .py-dir__more{grid-template-rows:1fr;}
.py-dir__row:focus-within .py-dir__mark{transform:rotate(90deg);}






/* ============================================================
   Real screens, inside the bands they belong to.
   The same family of entrances as the Alt Schools and ALT POS
   pages, so all four product pages move the same way.
   ============================================================ */
.py-shot{margin-block:clamp(30px,3.8vw,56px);}
.py-shot figure{margin:0;min-width:0;}
.py-shot__frame{
	position:relative;overflow:hidden;
	border-radius:clamp(9px,1vw,14px);
	border:1px solid rgba(31,42,32,.14);
	background:#f2efe7;
	box-shadow:0 30px 62px -46px rgba(31,42,32,.58);
	transition:box-shadow .6s ease;
}
.py-shot img{display:block;width:100%;height:auto;}

/* Every shot breathes in: the picture eases back to true size
   as its frame arrives. One shared gesture under the rest. */
.as-anim .py-shot img{transform:scale(1.06);transform-origin:50% 14%;
	transition:transform 1.4s cubic-bezier(.16,.84,.26,1);}
.as-anim .py-shot.as-in img{transform:none;}

.py-shot figcaption{
	display:flex;gap:10px;align-items:baseline;margin-top:11px;
	font-size:12.8px;line-height:1.5;color:var(--muted);
}
.py-shot figcaption b{
	flex:0 0 auto;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
	font-weight:700;color:var(--green);padding-top:.2em;
}

/* ---------- Two cards dealt onto the table ---------- */
.py-shot--fan{position:relative;max-width:min(980px,100%);margin-inline:auto;perspective:1500px;}
.py-shot--fan .py-shot__pair{position:relative;display:grid;transform-style:preserve-3d;}
.py-shot--fan figure{grid-area:1 / 1;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s ease;}
.py-shot--fan figure:nth-child(1){--rest:translate(-4.5%,0) rotate(-2.8deg);z-index:1;}
.py-shot--fan figure:nth-child(2){--rest:translate(4.5%,4.5%) rotate(2.4deg);z-index:2;}
.py-shot--fan figure{transform:var(--rest);}
.as-anim .py-shot--fan figure{opacity:0;transform:translate(34%,12%) rotate(9deg) scale(.94);}
.as-anim .py-shot--fan.as-in figure{opacity:1;transform:var(--rest);
	transition:transform 1.05s cubic-bezier(.17,.85,.24,1),opacity .6s ease;}
.as-anim .py-shot--fan.as-in figure:nth-child(2){transition-delay:.13s;}
.py-shot--fan figcaption{position:absolute;left:0;right:0;bottom:-2.6em;opacity:0;transform:translateY(-5px);
	transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover) and (min-width:861px){
.py-shot--fan:hover figure:nth-child(1){transform:translate(-27%,-2.5%) rotate(-4.2deg);}
.py-shot--fan:hover figure:nth-child(2){transform:translate(27%,2.5%) rotate(3.6deg);}
.py-shot--fan figure:hover{z-index:3;}
.py-shot--fan figure:hover .py-shot__frame{box-shadow:0 52px 96px -40px rgba(31,42,32,.72);}
.py-shot--fan figure:hover figcaption{opacity:1;transform:none;}
.py-shot--fan:hover .py-shot__note{opacity:0;}
}
.py-shot--fan .py-shot__note{
	margin-top:clamp(24px,3vw,40px);text-align:center;font-size:12.8px;color:var(--muted);
	transition:opacity .35s ease;
}
.py-shot--fan .py-shot__note b{color:var(--green);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:10px;}

/* ---------- One card, dealt the same way ---------- */
.py-shot--deal{max-width:min(1000px,100%);margin-inline:auto;perspective:1500px;}
.as-anim .py-shot--deal figure{opacity:0;transform:translate(26%,10%) rotate(7deg) scale(.95);
	transition:opacity .6s ease,transform 1.05s cubic-bezier(.17,.85,.24,1);}
.as-anim .py-shot--deal.as-in figure{opacity:1;transform:none;}
@media (hover:hover){
.py-shot--deal figure:hover .py-shot__frame{box-shadow:0 50px 92px -42px rgba(31,42,32,.7);}
}

/* ---------- The pair drifts at two speeds ---------- */
.py-shot--drift{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,40px);align-items:start;}
.py-shot--drift figure{will-change:transform;}
.py-shot--drift figure:nth-child(2){margin-top:clamp(26px,4.6vw,68px);}
/* --d is written by script from the scroll position; without it
   the pair simply sits where the grid puts it. */
.py-shot--drift .py-shot__frame{transform:translateY(calc(var(--d,0) * 1px));}
.as-anim .py-shot--drift figure{opacity:0;transform:translateY(52px);
	transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1);}
.as-anim .py-shot--drift.as-in figure{opacity:1;transform:none;}
.as-anim .py-shot--drift.as-in figure:nth-child(2){transition-delay:.15s;}
@media (hover:hover){
.py-shot--drift figure:hover .py-shot__frame{box-shadow:0 44px 78px -40px rgba(31,42,32,.66);}
}

/* ---------- A diagonal wipe with a lit edge ---------- */
.py-shot--wipe{max-width:min(1060px,100%);margin-inline:auto;}
.as-anim .py-shot--wipe .py-shot__frame{clip-path:polygon(-30% 0,0 0,-14% 100%,-44% 100%);
	transition:clip-path 1.15s cubic-bezier(.2,.84,.22,1);}
.as-anim .py-shot--wipe.as-in .py-shot__frame{clip-path:polygon(-30% 0,145% 0,131% 100%,-44% 100%);}
.py-shot--wipe .py-shot__frame::after{
	content:"";position:absolute;inset:-10% -30%;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(97deg,transparent 46%,rgba(255,255,255,.72) 50%,transparent 54%);
	background-size:300% 100%;
}
.as-anim .py-shot--wipe.as-in .py-shot__frame::after{animation:py-edge 1.15s cubic-bezier(.2,.84,.22,1);}
@keyframes py-edge{0%{opacity:0;background-position:118% 0}10%{opacity:1}92%{opacity:1}100%{opacity:0;background-position:-40% 0}}
.as-anim .py-shot--wipe figcaption{opacity:0;transform:translateY(6px);
	transition:opacity .5s ease .62s,transform .6s cubic-bezier(.2,.8,.2,1) .62s;}
.as-anim .py-shot--wipe.as-in figcaption{opacity:1;transform:none;}

/* ---------- In from an edge, then a gleam ---------- */
.py-shot--slide{max-width:min(1060px,100%);margin-inline:auto;}
.as-anim .py-shot--slide figure{opacity:0;transform:translateX(-14%) rotate(-1.6deg);
	transition:opacity .7s ease,transform 1.05s cubic-bezier(.16,.86,.22,1);}
.as-anim .py-shot--slide--right figure{transform:translateX(14%) rotate(1.6deg);}
.as-anim .py-shot--slide.as-in figure{opacity:1;transform:none;}
.py-shot--slide .py-shot__frame::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
	background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
	background-size:240% 100%;background-position:150% 0;opacity:0;
}
.as-anim .py-shot--slide.as-in .py-shot__frame::after{animation:py-gleam 1.15s cubic-bezier(.3,.7,.3,1) .5s;}
@keyframes py-gleam{0%{opacity:0;background-position:150% 0}25%{opacity:1}100%{opacity:0;background-position:-60% 0}}
.py-shot--slide img{transition:transform .8s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.py-shot--slide figure:hover img{transform:scale(1.03);}
.py-shot--slide figure:hover .py-shot__frame{box-shadow:0 46px 84px -40px rgba(31,42,32,.68);}
}

/* ---------- It turns in on its hinge ---------- */
.py-shot--flip{max-width:min(1060px,100%);margin-inline:auto;perspective:1500px;}
.py-shot--flip figure{transform-style:preserve-3d;}
.as-anim .py-shot--flip figure{opacity:0;transform:rotateY(-24deg) translateZ(-70px);transform-origin:left center;
	transition:opacity .7s ease,transform 1.05s cubic-bezier(.2,.84,.22,1);}
.as-anim .py-shot--flip.as-in figure{opacity:1;transform:none;}
.py-shot--flip .py-shot__frame::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(80deg,rgba(255,255,255,.6),transparent 55%);
}
.as-anim .py-shot--flip.as-in .py-shot__frame::after{animation:py-spec 1.05s ease-out;}
@keyframes py-spec{0%{opacity:.8}100%{opacity:0}}

/* ---------- Narrow ---------- */
@media (max-width:860px){
.py-shot--drift{grid-template-columns:1fr;gap:clamp(20px,5vw,30px);}
.py-shot--drift figure:nth-child(2){margin-top:0;}
.py-shot--drift .py-shot__frame{transform:none;}
.py-shot--fan .py-shot__pair{display:grid;grid-template-columns:1fr;gap:18px;}
.py-shot--fan figure{grid-area:auto;}
.as-anim .py-shot--fan figure{opacity:0;transform:translateY(30px);}
.as-anim .py-shot--fan.as-in figure,
.py-shot--fan figure{transform:none;}
.as-anim .py-shot--fan.as-in figure{opacity:1;}
.py-shot--fan figcaption{position:static;opacity:1;transform:none;}
.py-shot--fan .py-shot__note{display:none;}
.as-anim .py-shot--deal figure{transform:translateY(30px);}
.as-anim .py-shot--deal.as-in figure{transform:none;}
.as-anim .py-shot--slide figure,
.as-anim .py-shot--slide--right figure{transform:translateY(34px) rotate(0);}
.as-anim .py-shot--slide.as-in figure{transform:none;}
.as-anim .py-shot--flip figure{transform:translateY(34px);}
.as-anim .py-shot--flip.as-in figure{transform:none;}
.py-shot figcaption{font-size:12.5px;}
}

@media (prefers-reduced-motion:reduce){
.as-anim .py-shot figure,
.as-anim .py-shot.as-in figure,
.as-anim .py-shot img,
.as-anim .py-shot.as-in img{opacity:1;transform:none;transition:none;}
.py-shot--fan figure{transform:none;}
.as-anim .py-shot--wipe .py-shot__frame,
.as-anim .py-shot--wipe.as-in .py-shot__frame{clip-path:none;transition:none;}
.py-shot--wipe .py-shot__frame::after,
.py-shot--slide .py-shot__frame::after,
.py-shot--flip .py-shot__frame::after{display:none;}
.as-anim .py-shot--wipe figcaption{opacity:1;transform:none;}
.py-shot--drift .py-shot__frame{transform:none;}
.py-shot--fan figcaption{position:static;opacity:1;}
}

/* The shots arrive from off-frame, so the bands clip sideways. */
.py-band,.py-end{overflow-x:clip;}


/* ============================================================
   "Payroll outsourcing" — the service, said out loud.
   A marker that sweeps under the phrase as the band arrives,
   plus a filled chip in the hero so it is visible at the top.
   ============================================================ */
.py-hl{
	position:relative;white-space:nowrap;font-weight:600;color:#fff;
	background-image:linear-gradient(transparent 58%,color-mix(in srgb,var(--py-warm,#c8a951) 62%,transparent) 58%);
	background-repeat:no-repeat;background-size:0 100%;
	transition:background-size .95s cubic-bezier(.2,.8,.2,1) .3s;
	padding-inline:1px;
}
.as-anim .as-in .py-hl,
.as-anim .as-rv.as-in .py-hl{background-size:100% 100%;}
/* Without the reveal system the marker is simply already drawn. */
html:not(.as-anim) .py-hl{background-size:100% 100%;}

/* The hero carries it as a second, filled chip. */
.am-chip + .am-chip{margin-left:8px;}
body.am .am-chip--fill{
	background:var(--py-warm,#c8a951);
	border-color:transparent;
	color:#241f10;
	font-weight:600;
}

@media (max-width:640px){
/* The two chips still fit side by side here; they just need the gap. */
.am-chip + .am-chip{margin-left:6px;}
.py-hl{white-space:normal;}
}

@media (prefers-reduced-motion:reduce){
.py-hl{transition:none;background-size:100% 100%;}
}


/* ============================================================
   Payroll outsourcing — a tab on the left edge.
   It rides along the whole page, so the service is never more
   than a glance away, and it takes you to the band that
   explains it. Out of the way of the WhatsApp button, which
   lives bottom-right.
   ============================================================ */
.py-side{
	position:fixed;left:0;top:50%;z-index:70;
	transform:translate(-100%,-50%);
	display:flex;align-items:center;gap:9px;
	padding:15px 12px 15px 14px;
	border-radius:0 12px 12px 0;
	background:var(--py-warm,#c8a951);
	color:#241f10;
	text-decoration:none;
	font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	writing-mode:vertical-rl;
	box-shadow:0 14px 34px -12px rgba(31,26,10,.55);
	opacity:0;pointer-events:none;
	transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease,padding-left .35s ease,box-shadow .35s ease;
}
.py-side.is-on{transform:translate(0,-50%);opacity:1;pointer-events:auto;}
.py-side i{
	font-style:normal;font-size:14px;line-height:1;
	transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
.py-side:hover{padding-left:20px;box-shadow:0 18px 44px -12px rgba(31,26,10,.65);}
.py-side:hover i{transform:translateY(4px);}
}
.py-side:focus-visible{outline:3px solid #fff;outline-offset:2px;}

/* A slow shine travelling down the tab, so the eye catches it. */
.py-side::after{
	content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
	background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
	background-size:100% 260%;
	animation:py-side-shine 6s ease-in-out infinite 2s;
}
@keyframes py-side-shine{
	0%{background-position:0 -130%}
	45%{background-position:0 130%}
	100%{background-position:0 130%}
}

/* Narrow screens keep the hero chip instead; an edge tab there
   would sit on top of the content. */
@media (max-width:900px){
.py-side{display:none;}
}

@media (prefers-reduced-motion:reduce){
.py-side{transition:opacity .3s ease;}
.py-side::after{animation:none;display:none;}
.py-side i{transition:none;}
}


/* Closing band: cream, not purple. The same cream the rest of
   the site uses for a quiet band, so the page ends in the house
   palette rather than the product colour. What was white on
   purple becomes ink and green on cream; the slow conic sweep
   stays, just far softer. */
.py-end{background:var(--bg-2);color:var(--ink);}
.py-end::before{background:conic-gradient(from 0deg,transparent 0 62%,rgba(77,105,78,.07) 76%,transparent 90%);}
.py-end__kicker{color:var(--muted);}
body.am .py-end h2{color:var(--green-deep);}
.py-end h2 em{color:transparent;-webkit-text-stroke:2px rgba(77,105,78,.55);}
.py-end__lead{color:var(--muted);}
body.am .py-end__back{color:var(--green);}
body.am .py-end__back:hover{color:var(--green-deep);}