/* /payroll — designed page. Everything is scoped to .dz-payroll. */
.dz-payroll { --lime:#cfea3d; --ink:#0e0e0e; --line:#d9d6cf; --grey:#6b6b64; --paper:#f4f3ef;
  --edge:max(24px, calc(50vw - 596px)); }
.dz-payroll .w { max-width:1240px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.dz-payroll h3 { margin:0 0 8px; }
.dz-payroll p:last-child { margin-bottom:0; }
.dz-payroll .acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.dz-payroll .acts .btn { margin:0; }
.dz-payroll .go { font-weight:700; color:var(--ink); }
.dz-payroll .go::after { content:" \2192"; }

/* Hero: black copy panel, photo to the right-hand window edge */
.dz-payroll .pr-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); min-height:min(80vh,740px); background:var(--ink); }
.dz-payroll .pr-hero .copy { padding:72px 64px 72px var(--edge); display:flex; flex-direction:column; justify-content:center; }
.dz-payroll .pr-hero h1 { color:#fff; margin:0 0 24px; }
.dz-payroll .pr-hero p { color:var(--line); max-width:56ch; }
.dz-payroll .pr-hero .btn-outline, .dz-payroll .pr-close .btn-outline { color:#fff; border-color:rgba(255,255,255,.75); }
.dz-payroll .pr-hero .ph { position:relative; min-height:420px; }
.dz-payroll .pr-hero .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% 30%; display:block; }

/* The pay month */
.dz-payroll .pr-month { padding:96px 0; }
.dz-payroll .pr-month .w { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-areas:"head cal" "key cal"; gap:0 72px; align-items:start; }
.dz-payroll .pr-month .head { grid-area:head; margin-bottom:36px; }
.dz-payroll .pr-month .head h2 { margin-bottom:16px; }
.dz-payroll .calwrap { grid-area:cal; position:sticky; top:96px; }
.dz-payroll .pr-key { grid-area:key; list-style:none; margin:0; padding:0; }
.dz-payroll .pr-key li { display:grid; grid-template-columns:56px minmax(0,1fr); gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.dz-payroll .pr-key li:first-child { border-top:0; padding-top:0; }
.dz-payroll .pr-key .kd { width:56px; height:56px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:"Anton","Arial Narrow",sans-serif; font-size:1.7rem; line-height:1; box-sizing:border-box; }
.dz-payroll .pr-key h3 { margin-top:4px; }
.dz-payroll .k-cut .kd, .dz-payroll .m-cut { border:2px solid var(--ink); background:#fff; }
.dz-payroll .k-hmrc .kd, .dz-payroll .m-hmrc { background:var(--line); border-color:var(--line); }
.dz-payroll .k-run .kd, .dz-payroll .m-run { background:var(--lime); border-color:var(--lime); }
.dz-payroll .k-rti .kd, .dz-payroll .m-rti { background:var(--lime); border:2px solid var(--ink); }
.dz-payroll .k-pay .kd, .dz-payroll .m-pay { background:var(--ink); color:var(--lime); border-color:var(--ink); }

.dz-payroll .pr-cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.dz-payroll .pr-cal .dow { font-weight:700; color:var(--grey); padding:0 0 4px 4px; }
.dz-payroll .pr-cal .day { min-height:96px; border:1px solid var(--line); border-radius:6px; padding:10px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:space-between; }
.dz-payroll .pr-cal .day.wkend { background:var(--paper); }
.dz-payroll .pr-cal .day.blank { border:0; background:none; }
.dz-payroll .pr-cal .n { font-family:"Anton","Arial Narrow",sans-serif; font-size:1.5rem; line-height:1; }
.dz-payroll .pr-cal .lab { font-weight:700; line-height:1.15; }
.dz-payroll .pr-cal .m-pay .lab { color:#fff; }
.dz-payroll .pr-cal .day.m-cut, .dz-payroll .pr-cal .day.m-rti { border:3px solid var(--ink); }
.dz-payroll .pr-cal .day.m-hmrc, .dz-payroll .pr-cal .day.m-run, .dz-payroll .pr-cal .day.m-pay { border-color:transparent; }
.dz-payroll .pr-close .cta > * { position:relative; }
@media (min-width:861px) { .dz-payroll .pr-close .cta { display:flex; align-items:center; } }

/* What each run covers: photo bleeds to the left edge, full band height */
.dz-payroll .pr-run { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); background:var(--paper); }
.dz-payroll .pr-run .ph { position:relative; min-height:560px; }
.dz-payroll .pr-run .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.dz-payroll .pr-run .copy { padding:96px var(--edge) 96px 72px; }
.dz-payroll .pr-run h2 { margin-bottom:40px; }
.dz-payroll .pr-run .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 48px; }
.dz-payroll .pr-run .it { border-top:3px solid var(--ink); padding-top:16px; }

/* Auto-enrolment on black */
.dz-payroll .pr-ae { background:var(--ink); color:var(--line); padding:96px 0; }
.dz-payroll .pr-ae h2, .dz-payroll .pr-ae h3 { color:#fff; }
.dz-payroll .pr-ae .top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 72px; align-items:end; }
.dz-payroll .pr-strip { margin:64px 0 20px; }
.dz-payroll .pr-strip .yrs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.dz-payroll .pr-strip .yrs span { color:#fff; font-weight:700; border-left:1px solid #555; padding:0 0 12px 10px; }
.dz-payroll .pr-strip .ticks { display:grid; grid-template-columns:repeat(36,minmax(0,1fr)); gap:5px; height:120px; align-items:end; }
.dz-payroll .pr-strip .tick { height:46%; background:var(--lime); border-radius:3px 3px 0 0; }
.dz-payroll .pr-strip .tick.last { height:100%; background:#fff; }
.dz-payroll .pr-strip-key { display:flex; flex-wrap:wrap; gap:8px 40px; }
.dz-payroll .pr-strip-key p { margin:0; display:flex; align-items:center; gap:10px; }
.dz-payroll .sw { width:14px; height:14px; border-radius:3px; display:inline-block; flex:none; }
.dz-payroll .sw-run { background:var(--lime); }
.dz-payroll .sw-re { background:#fff; }
.dz-payroll .pr-ae .duties { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 72px; margin-top:64px; }
.dz-payroll .pr-ae .duties .it { border-top:3px solid var(--lime); padding-top:16px; }
.dz-payroll .pr-ae .scheme { margin-top:64px; border:1px solid #3a3a3a; border-radius:10px; padding:32px 36px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 72px; }
.dz-payroll .pr-ae .scheme h3 { grid-column:1 / -1; }
.dz-payroll .pr-ae .scheme a { color:var(--lime); text-decoration:underline; text-underline-offset:.2em; font-weight:700; }

/* Pricing */
.dz-payroll .pr-price { padding:96px 0; }
.dz-payroll .pr-price .w { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:72px; align-items:start; }
.dz-payroll .pr-price h2 { grid-column:1 / -1; margin-bottom:-24px; }
.dz-payroll .prices { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:6px solid var(--ink); border-bottom:1px solid var(--line); }
.dz-payroll .prices .pc { padding:28px 32px 32px; border-left:1px solid var(--line); }
.dz-payroll .prices .pc:first-child { border-left:0; padding-left:0; background:none; }
.dz-payroll .prices .pc:first-child .amt { box-shadow:inset 0 -14px 0 var(--lime); display:inline-block; }
.dz-payroll .prices .amt { font-family:"Anton","Arial Narrow",sans-serif; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; color:var(--ink); margin:10px 0 6px; }
.dz-payroll .prices .unit { font-weight:700; color:var(--ink); margin:0 0 14px; }
.dz-payroll .prices .setup { font-weight:700; color:var(--ink); }
.dz-payroll .pr-price .main p { max-width:64ch; }
.dz-payroll .pr-price .btn-outline { color:var(--ink); }
.dz-payroll .starts { border-left:1px solid var(--line); }
.dz-payroll .starts .st { display:block; padding:28px 0 28px 36px; border-bottom:1px solid var(--line); }
.dz-payroll .starts .st:first-child { padding-top:4px; }
.dz-payroll .starts .st:last-child { border-bottom:0; padding-bottom:4px; }
.dz-payroll .starts .st p { margin:0 0 10px; }
.dz-payroll .starts .st:hover .go { text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:3px; text-underline-offset:.25em; }

/* Questions */
.dz-payroll .pr-faq { background:var(--paper); padding:96px 0; }
.dz-payroll .pr-faq .w { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:72px; align-items:start; }
.dz-payroll .pr-faq .side { position:sticky; top:96px; }
.dz-payroll .pr-faq .side h2 { margin-bottom:20px; }
.dz-payroll .pr-faq .side a { font-weight:700; }
.dz-payroll .pr-faq details { border-top:1px solid #c9c5bb; }
.dz-payroll .pr-faq details:last-child { border-bottom:1px solid #c9c5bb; }
.dz-payroll .pr-faq summary { list-style:none; cursor:pointer; font-weight:800; color:var(--ink); padding:22px 48px 22px 0; position:relative; }
.dz-payroll .pr-faq summary::-webkit-details-marker { display:none; }
.dz-payroll .pr-faq summary::after { content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:"Anton","Arial Narrow",sans-serif; font-size:1.6rem; line-height:1; }
.dz-payroll .pr-faq details[open] summary::after { content:"\2212"; }
.dz-payroll .pr-faq details p { margin:0 0 24px; max-width:72ch; }

/* Close: quote panel on black beside the related services */
.dz-payroll .pr-close { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.dz-payroll .pr-close .cta { background:var(--ink); color:var(--line); padding:88px 64px 88px var(--edge); }
.dz-payroll .pr-close .cta h2 { color:#fff; margin-bottom:20px; }
.dz-payroll .pr-close .cta .ct { margin-top:32px; }
.dz-payroll .pr-close .cta .ct a { color:#fff; font-weight:700; }
.dz-payroll .pr-close .more { padding:88px var(--edge) 88px 64px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 48px; align-content:start; border-bottom:1px solid var(--line); }
.dz-payroll .pr-close .grp h3 a { text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:3px; text-underline-offset:.2em; }
.dz-payroll .pr-close ul { list-style:none; margin:0 0 14px; padding:0; }
.dz-payroll .pr-close li { padding:7px 0; border-bottom:1px solid var(--line); }
.dz-payroll .pr-close li a { font-weight:700; }
.dz-payroll .pr-close li a::after { content:" \2192"; }
.dz-payroll .reg { color:var(--grey); }
.dz-payroll .pr-ae .reg { color:#a9a9a1; }

@media (max-width:1100px) {
  .dz-payroll .pr-month .w { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "cal" "key"; }
  .dz-payroll .calwrap { position:static; margin-bottom:48px; }
  .dz-payroll .pr-close .more { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px) {
  .dz-payroll .pr-hero { grid-template-columns:minmax(0,1fr); min-height:0; }
  .dz-payroll .pr-hero .ph { order:-1; min-height:0; height:300px; }
  .dz-payroll .pr-hero .copy { padding:40px 24px 48px; }
  .dz-payroll .pr-month, .dz-payroll .pr-ae, .dz-payroll .pr-price, .dz-payroll .pr-faq { padding:64px 0; }
  .dz-payroll .pr-run { grid-template-columns:minmax(0,1fr); }
  .dz-payroll .pr-run .ph { min-height:0; height:280px; }
  .dz-payroll .pr-run .copy { padding:56px 24px 64px; }
  .dz-payroll .pr-run .grid, .dz-payroll .pr-ae .duties, .dz-payroll .pr-ae .top, .dz-payroll .pr-ae .scheme { grid-template-columns:minmax(0,1fr); }
  .dz-payroll .pr-ae .duties { gap:28px; margin-top:48px; }
  .dz-payroll .pr-ae .scheme { padding:24px; margin-top:48px; }
  .dz-payroll .pr-strip { margin-top:44px; }
  .dz-payroll .pr-strip .ticks { gap:3px; height:90px; }
  .dz-payroll .pr-price .w, .dz-payroll .pr-faq .w { grid-template-columns:minmax(0,1fr); gap:40px; }
  .dz-payroll .pr-price h2 { margin-bottom:-12px; }
  .dz-payroll .prices { grid-template-columns:minmax(0,1fr); }
  .dz-payroll .prices .pc, .dz-payroll .prices .pc:first-child { border-left:0; padding:24px 0 28px; border-top:1px solid var(--line); }
  .dz-payroll .prices .pc:first-child { border-top:0; }
  .dz-payroll .starts { border-left:0; border-top:1px solid var(--line); }
  .dz-payroll .starts .st, .dz-payroll .starts .st:first-child { padding:24px 0; }
  .dz-payroll .pr-faq .side { position:static; }
  .dz-payroll .pr-close { grid-template-columns:minmax(0,1fr); }
  .dz-payroll .pr-close .cta { padding:56px 24px; }
  .dz-payroll .pr-close .more { padding:56px 24px; gap:36px; }
}
@media (max-width:560px) {
  .dz-payroll .pr-cal { gap:4px; }
  .dz-payroll .pr-cal .dow { padding-left:2px; }
  .dz-payroll .pr-cal .day { min-height:48px; padding:6px; justify-content:center; align-items:center; }
  .dz-payroll .pr-cal .n { font-size:1.15rem; }
  .dz-payroll .pr-cal .lab { display:none; }
  .dz-payroll .pr-key li { grid-template-columns:48px minmax(0,1fr); gap:14px; }
  .dz-payroll .pr-key .kd { width:48px; height:48px; font-size:1.45rem; }
  .dz-payroll .acts .btn { flex:1 1 100%; }
}