/* Payroll and CIS: the opener's payslip, the two plans, and the payslip set piece (includes/svc/set-payroll.php). */

/* ---------- Opener document: the payslip fills in ---------- */
.doc__slip li { justify-content: space-between; gap: 12px; padding: 6px 0; }
.doc__slip li b { font-weight: 700; white-space: nowrap; transition: opacity .45s, transform .45s; }
/* Between loops the amounts dim (never vanish), then fill in again line by line */
.motion:not(.motion-fail) .doc__slip li:not(.is-on) b { opacity: .35; transform: translateX(10px); }
.doc__slip li span { transition: color .4s; }
.motion:not(.motion-fail) .doc__slip li:not(.is-on) span { color: #B9A9AE; }

/* ---------- Plans: two of them ---------- */
.sp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .sp__grid { grid-template-columns: minmax(0, 1fr); } }

/* Mark's head sits at the very top of his photo */
.sfq__frame img { object-position: 50% 0%; }

/* ---------- Watch a payslip add up ---------- */
.ps { position: relative; overflow: clip; }
.ps__ruling { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(255,255,255,.06) 35px, rgba(255,255,255,.06) 36px); animation: so-drift-36 22s linear infinite; }
.ps__oval { position: absolute; right: -16vw; top: 50%; width: min(1000px, 70vw); transform: translateY(-50%); overflow: visible; pointer-events: none; }
.ps__oval ellipse { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.4; }
.ps__oval .dash { stroke: rgba(242,214,75,.35); stroke-dasharray: 3 12; animation: dash-turn 50s linear infinite; }
.ps__pin { position: relative; }
.ps__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5.5vw, 100px); align-items: center; }
.ps h2 { color: #fff; margin-bottom: 18px; }

/* The month strip */
.ms { margin-top: clamp(22px, 3.4vh, 36px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3); }
.ms__h { margin: 0 0 68px; font-weight: 700; color: #fff; }
.ms__track { position: relative; margin: 0 6px; }
.ms__ticks { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); align-items: end; height: 12px; border-bottom: 2px solid rgba(255,255,255,.55); }
.ms__ticks i { position: relative; justify-self: center; width: 1px; height: 7px; background: rgba(255,255,255,.4); }
.ms__ticks i[data-n]::after { content: attr(data-n); position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-style: normal; font-weight: 700; font-size: .85rem; color: #FBE3E8; }
.ms__fill { position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: var(--highlight); transform-origin: left; transform: scaleX(.694); }
.ms__dot { position: absolute; bottom: -8px; left: calc(21.5 / 31 * 100%); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 0 0 rgba(242,214,75,.6); animation: ms-pulse 2s infinite; }
@keyframes ms-pulse { 0% { box-shadow: 0 0 0 0 rgba(242,214,75,.55); } 70% { box-shadow: 0 0 0 10px rgba(242,214,75,0); } 100% { box-shadow: 0 0 0 0 rgba(242,214,75,0); } }
.ms__marks { margin: 0; padding: 0; list-style: none; }
.ms__mk { position: absolute; left: calc((var(--d) - .5) / var(--days) * 100%); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.ms__mk--up { bottom: 20px; flex-direction: column-reverse; }
.ms__mk--down { top: 22px; }
.ms__mk b { position: relative; z-index: 1; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 28px; color: #fff; white-space: nowrap; }
.ms__mk span { font-weight: 700; font-size: .92rem; line-height: 1.25; color: #FBE3E8; white-space: nowrap; }
.ms__mk--up span { margin-bottom: 6px; }
.ms__mk--down span { margin-top: 6px; }
.ms__ring { position: absolute; left: 50%; width: 64px; height: 42px; margin-left: -32px; overflow: visible; pointer-events: none; }
.ms__mk--up .ms__ring { bottom: -7px; }
.ms__mk--down .ms__ring { top: -7px; }
.ms__ring ellipse { fill: none; stroke: var(--highlight); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ms__mk:first-child .ms__ring ellipse { stroke: rgba(255,255,255,.5); }
.ms__note { margin: 78px 0 0; font-size: .95rem; color: #FBE3E8; }

/* The payslip */
.ps__stage { position: relative; perspective: 1400px; }
.ps__slip { position: relative; padding: 24px 30px 24px; background: #fff; color: var(--ink); border-top: 5px solid var(--claret); box-shadow: 0 34px 70px rgba(34,9,15,.45); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, #F6ECEE 33px, #F6ECEE 34px); }
.ps__slip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: linear-gradient(-45deg, transparent 5px, #fff 0) 0 0 / 10px 8px repeat-x, linear-gradient(45deg, transparent 5px, #fff 0) 0 0 / 10px 8px repeat-x; }
.ps__top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.ps__top p { margin: 0; }
.ps__brand { font-family: var(--serif); font-size: clamp(1.7rem, 2.2vw, 2.1rem); line-height: 1; }
.ps__ex { padding: 4px 10px; border: 1.5px solid var(--crimson); color: var(--crimson); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.ps__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px 0; border-block: 1px solid var(--rule); }
.ps__meta dt { font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.ps__meta dd { margin: 0; font-weight: 600; }
.ps__rows { margin: 0; padding: 0; list-style: none; }
.ps__row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 11px 0; border-bottom: 1px dashed #DCCBD0; }
.ps__l { font-weight: 700; line-height: 1.25; }
.ps__l small { display: block; margin-top: 2px; font-weight: 400; font-size: .92rem; color: var(--ink-soft); }
.ps__v { flex: none; font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.ps__row + .ps__row .ps__v { color: var(--claret); }
.ps__net { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 14px 0 0; padding: 12px 16px; background: var(--blush); border-left: 4px solid var(--highlight); }
.ps__net span { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.ps__net b { font-weight: 700; font-size: clamp(1.6rem, 2.1vw, 1.9rem); line-height: 1; color: var(--claret); white-space: nowrap; }
.ps__er { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 62%; margin: 14px 0 0; }
.ps__er dt { font-size: .9rem; color: var(--ink-soft); }
.ps__er dd { margin: 0; font-weight: 700; }
.ps__stamp { position: absolute; right: 22px; bottom: 14px; width: 148px; height: 88px; display: grid; place-content: center; text-align: center; border: 3px solid var(--crimson); outline: 1.5px solid var(--crimson); outline-offset: -9px; border-radius: 50%; color: var(--crimson); background: rgba(255,255,255,.85); transform: rotate(-10deg); pointer-events: none; }
.ps__stamp span { font-family: var(--serif); font-size: 1.6rem; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.ps__stamp small { font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.ps__small { margin: 18px 0 0; font-size: .92rem; line-height: 1.45; color: #FBE3E8; }

/* Desktop: pinned and scrubbed */
.ps.ps--pin { padding-block: 0; }
.ps--pin .ps__pin { height: 100svh; min-height: 640px; display: flex; align-items: center; padding: calc(var(--head-h) + 8px) 0 18px; }
.ps--pin .ps__pin > .wrap { width: min(1320px, 100% - var(--gutter) * 2); }
@media (min-width: 901px) and (max-height: 840px) {
  .ps__row { padding-block: 7px; }
  .ps__l small { font-size: .88rem; }
  .ps__slip { padding-block: 18px 18px; }
  .ps__small { margin-top: 12px; font-size: .88rem; }
  .ms__h { margin-bottom: 60px; }
  .ms__note { margin-top: 70px; }
}

@media (max-width: 1100px) and (min-width: 901px) { .ps__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ps__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ps__stage { order: 2; }
  .ps__copy { display: contents; }
  .ps__copy > h2, .ps__copy > .lede { order: 0; }
  .ms { order: 3; }
}
@media (max-width: 560px) {
  .ps__slip { padding: 20px 18px 18px; }
  .ps__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps__row { align-items: flex-start; }
  .ps__er { width: 100%; }
  .ps__stamp { right: -6px; bottom: auto; top: -46px; width: 120px; height: 72px; }
  .ps__stamp span { font-size: 1.3rem; }
  .ms__mk span { font-size: .86rem; }
  .ms__mk b { font-size: 1.2rem; }
}