.payroll-page { --ph-ink:#172338; --ph-muted:#566478; --ph-primary:#2a4fa3; --ph-primary-dark:#183a7a; --ph-accent:#a9c4f2; --ph-pale:#edf2fc; --ph-line:#dbe3f0; --ph-white:#fff; --ph-surface:#f7f9fd; --ph-radius:18px; --ph-shadow:0 16px 44px rgba(18,40,80,.09); }
.payroll-page *, .payroll-page *::before, .payroll-page *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:120px; }
.payroll-page { color:var(--ph-ink); background:var(--ph-white); font-family:"Noto Sans", "Segoe UI", Arial, sans-serif; font-size:16px; line-height:1.65; letter-spacing:normal; -webkit-font-smoothing:antialiased; }
.payroll-page :focus-visible { outline:3px solid var(--ph-primary); outline-offset:3px; }

/* Site template overrides: the template colours h1-h3 and gives bare ul/ol items padding, bullets and counters */
.payroll-page h1, .payroll-page h2, .payroll-page h3 { color:inherit; font-family:inherit; font-weight:700; }
.payroll-page h3 { letter-spacing:normal; }
.payroll-page ul, .payroll-page ol { margin:0; padding:0; list-style:none; }
.payroll-page ul li, .payroll-page ol li { margin:0; padding:0; }
.payroll-page ul li::before, .payroll-page ol li::before { content:none; position:static; width:auto; height:auto; border-radius:0; background:none; }

/* Shared bits */
.payroll-page .ph-wrap { width:min(1140px, calc(100% - 40px)); margin:0 auto; }
.payroll-page .ph-eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--ph-primary); font-size:.78rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.payroll-page .ph-eyebrow::before { content:""; width:25px; height:2px; background:var(--ph-accent); }
.payroll-page .ph-btn { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 20px; border:1px solid transparent; border-radius:999px; text-decoration:none; font-weight:750; transition:transform .18s ease, background .18s ease; }
.payroll-page .ph-btn:hover { transform:translateY(-2px); }
.payroll-page .ph-btn-primary, .payroll-page .ph-btn-primary:hover { color:#fff; background:var(--ph-primary); }
.payroll-page .ph-btn-primary:hover { background:var(--ph-primary-dark); }
.payroll-page .ph-btn-secondary, .payroll-page .ph-btn-secondary:hover { color:var(--ph-primary-dark); border-color:#b7c8e6; background:rgba(255,255,255,.78); }
.payroll-page .ph-btn-light, .payroll-page .ph-btn-light:hover { color:var(--ph-primary-dark); background:#fff; }

/* Hero, with the site-wide buy heading (extbc_buy_head) as its first row */
.payroll-page .ph-hero { overflow:hidden; position:relative; padding:40px 0 78px; background:radial-gradient(circle at 88% 20%, rgba(169,196,242,.25), transparent 28%), linear-gradient(135deg, #f3f6fd 0%, #fff 58%, #eef3fb 100%); border-bottom:1px solid var(--ph-line); }
.payroll-page .ph-buy { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; margin-bottom:56px; padding-bottom:22px; border-bottom:1px solid var(--ph-line); }
.payroll-page .ph-buy-title { flex:1 1 320px; margin:0; font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:800; line-height:1.3; letter-spacing:-.02em; }
.payroll-page .ph-note { max-width:760px; margin:24px 0 0; color:var(--ph-muted); font-size:.93rem; }
.payroll-page .ph-hero-grid { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(310px, .85fr); gap:54px; align-items:center; }
.payroll-page .ph-hero .ph-display { max-width:750px; margin:20px 0; font-size:clamp(2.35rem, 5vw, 4.35rem); line-height:1.06; letter-spacing:-.045em; }
.payroll-page .ph-hero .ph-display span { color:var(--ph-primary); }
.payroll-page .ph-lead { max-width:690px; margin:0; color:var(--ph-muted); font-size:clamp(1.05rem, 1.7vw, 1.23rem); }
.payroll-page .ph-actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:30px; }
.payroll-page .ph-hero-note { margin-top:16px; color:var(--ph-muted); font-size:.87rem; }

/* Illustrative overview card */
.payroll-page .ph-visual { position:relative; padding:25px; border:1px solid #d0dcf0; border-radius:26px; background:rgba(255,255,255,.78); box-shadow:var(--ph-shadow); }
.payroll-page .ph-visual-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:17px; border-bottom:1px solid var(--ph-line); }
.payroll-page .ph-visual-title { font-size:.92rem; font-weight:800; }
.payroll-page .ph-status { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; color:#17634f; background:#e1f5ec; font-size:.72rem; font-weight:800; }
.payroll-page .ph-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#34a77c; }
.payroll-page .ph-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.payroll-page .ph-mini-stat { padding:15px; border:1px solid var(--ph-line); border-radius:13px; background:#fff; }
.payroll-page .ph-mini-stat strong { display:block; color:var(--ph-primary-dark); font-size:1.5rem; line-height:1.2; }
.payroll-page .ph-mini-stat span { display:block; margin-top:5px; color:var(--ph-muted); font-size:.78rem; }
.payroll-page .ph-record { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid #e9eef7; }
.payroll-page .ph-record:last-child { border-bottom:0; }
.payroll-page .ph-record-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:var(--ph-primary); background:var(--ph-pale); font-weight:900; }
.payroll-page .ph-record strong { display:block; font-size:.84rem; }
.payroll-page .ph-record small { display:block; color:var(--ph-muted); font-size:.74rem; }
.payroll-page .ph-record em { color:var(--ph-primary); font-size:.73rem; font-style:normal; font-weight:800; }

/* Sections */
.payroll-page .ph-section { padding:78px 0; }
.payroll-page .ph-section-soft { background:var(--ph-surface); }
.payroll-page .ph-section-head { max-width:760px; margin-bottom:34px; }
.payroll-page .ph-section h2 { margin:12px 0; font-size:clamp(1.85rem, 3.6vw, 2.75rem); line-height:1.14; letter-spacing:-.035em; }
.payroll-page .ph-section-head p { margin:0; color:var(--ph-muted); font-size:1.04rem; }

/* Screenshots: each links to the full-size image */
.payroll-page .ph-shot { margin:0; }
.payroll-page .ph-shot a { display:block; overflow:hidden; border:1px solid var(--ph-line); border-radius:14px; background:#fff; box-shadow:var(--ph-shadow); transition:transform .18s ease, box-shadow .18s ease; }
.payroll-page .ph-shot a:hover { transform:translateY(-2px); box-shadow:0 20px 50px rgba(18,40,80,.14); }
.payroll-page .ph-shot img { display:block; width:100%; max-width:none; height:auto; }
.payroll-page .ph-shot figcaption { margin-top:12px; color:var(--ph-muted); font-size:.9rem; }
.payroll-page .ph-shot figcaption strong { color:var(--ph-ink); }
.payroll-page .ph-shot-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin-top:32px; }

/* Customers and vendors */
.payroll-page .ph-party-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.payroll-page .ph-party { padding:27px; border:1px solid var(--ph-line); border-radius:var(--ph-radius); background:#fff; }
.payroll-page .ph-party h3 { margin:0 0 9px; font-size:1.2rem; }
.payroll-page .ph-party p { margin:0; color:var(--ph-muted); }
.payroll-page .ph-party-tag { display:inline-flex; margin-bottom:14px; padding:6px 10px; border-radius:8px; color:var(--ph-primary-dark); background:var(--ph-pale); font-size:.76rem; font-weight:800; }
.payroll-page .ph-checks { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 20px; margin:22px 0 0; padding:0; list-style:none; }
.payroll-page .ph-checks li { position:relative; padding-left:25px; color:var(--ph-muted); }
.payroll-page .ph-checks li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--ph-primary); font-weight:900; }

/* Capabilities */
.payroll-page .ph-feature-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:17px; }
.payroll-page .ph-feature { min-height:205px; padding:24px; border:1px solid var(--ph-line); border-radius:var(--ph-radius); background:#fff; }
.payroll-page .ph-feature-icon { display:grid; place-items:center; width:43px; height:43px; margin-bottom:17px; border-radius:12px; color:var(--ph-primary); background:var(--ph-pale); font-size:1.13rem; font-weight:900; }
.payroll-page .ph-feature h3 { margin:0 0 8px; font-size:1.08rem; line-height:1.3; }
.payroll-page .ph-feature p { margin:0; color:var(--ph-muted); font-size:.94rem; }

/* Lifecycle */
.payroll-page .ph-lifecycle { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:11px; counter-reset:ph-step; }
.payroll-page .ph-step { position:relative; padding:19px 16px; border:1px solid var(--ph-line); border-radius:15px; background:#fff; counter-increment:ph-step; }
.payroll-page .ph-step::before { content:"0" counter(ph-step); display:inline-block; margin-bottom:13px; color:var(--ph-primary); font-size:.78rem; font-weight:900; letter-spacing:.08em; }
.payroll-page .ph-step h3 { margin:0 0 7px; font-size:.98rem; }
.payroll-page .ph-step p { margin:0; color:var(--ph-muted); font-size:.85rem; }

/* Built around Business Central */
.payroll-page .ph-advantage-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:45px; align-items:start; }
.payroll-page .ph-advantage-copy p { color:var(--ph-muted); }
.payroll-page .ph-benefit-list { display:grid; gap:12px; }
.payroll-page .ph-benefit { display:grid; grid-template-columns:30px 1fr; gap:12px; padding:17px 0; border-bottom:1px solid var(--ph-line); }
.payroll-page .ph-benefit:last-child { border-bottom:0; }
.payroll-page .ph-benefit-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--ph-primary); background:var(--ph-pale); font-weight:900; }
.payroll-page .ph-benefit strong { display:block; margin-bottom:3px; }
.payroll-page .ph-benefit p { margin:0; color:var(--ph-muted); font-size:.93rem; }

/* Integrations */
.payroll-page .ph-integrations { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:28px; }
.payroll-page .ph-integration { padding:17px; border:1px solid var(--ph-line); border-radius:13px; background:#fff; }
.payroll-page .ph-integration strong { display:block; font-size:.94rem; }
.payroll-page .ph-integration span { display:block; margin-top:5px; color:var(--ph-muted); font-size:.82rem; }

/* Contact band, text left and button right (its #book-a-demo id is where the buy button lands while card payments are off) */
.payroll-page .ph-cta { padding:65px 0; color:#fff; background:linear-gradient(115deg, #183a7a, #2f5cb8); }
.payroll-page .ph-cta-grid { display:flex; justify-content:space-between; align-items:center; gap:32px; }
.payroll-page .ph-cta-grid > .ph-btn { flex:0 0 auto; }
.payroll-page .ph-cta h2 { max-width:690px; margin:11px 0; font-size:clamp(1.9rem, 4vw, 2.8rem); line-height:1.12; letter-spacing:-.035em; }
.payroll-page .ph-cta-copy p { max-width:700px; margin:0; color:rgba(255,255,255,.82); }
.payroll-page .ph-cta .ph-eyebrow { color:#c8dafb; }

.payroll-page .ph-fineprint { padding:22px 0 30px; color:var(--ph-muted); font-size:.82rem; }

/* Intro: page title, short pitch and the tab cards. The cards form a folder-tab row; the selected one joins the panel under it. */

/* Tab panels: every panel is visible without JavaScript, one at a time with it */

/* Problem and outcome cards */
.payroll-page .ph-outcomes { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.payroll-page .ph-outcome { padding:24px 22px; border:1px solid var(--ph-line); border-top:3px solid var(--ph-accent); border-radius:var(--ph-radius); background:#fff; }
.payroll-page .ph-outcome h3 { margin:0 0 9px; font-size:1.05rem; line-height:1.3; }
.payroll-page .ph-outcome p { margin:0; color:var(--ph-muted); font-size:.93rem; }

/* Chips: the fixed posting steps and the like */
.payroll-page .ph-kpis { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.payroll-page .ph-kpis li { padding:6px 12px; border:1px solid #b7c8e6; border-radius:999px; background:#fff; color:var(--ph-primary-dark); font-size:.82rem; font-weight:700; }

/* Six-step route (must stay above the media queries so they can still reduce the columns) */
.payroll-page .ph-lifecycle--six { grid-template-columns:repeat(6, minmax(0,1fr)); }

/* Demo band and the link across to the other app */
.payroll-page .ph-demo { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:36px 40px; border:1px solid #cfe3df; border-radius:24px; background:var(--ph-pale); }
.payroll-page .ph-demo h2 { margin:10px 0; font-size:clamp(1.5rem, 3vw, 2.1rem); }
.payroll-page .ph-demo p { max-width:680px; margin:0; color:var(--ph-muted); }
.payroll-page .ph-demo > .ph-btn { flex:0 0 auto; }
.payroll-page .ph-switch { padding:30px 0; border-top:1px solid var(--ph-line); background:var(--ph-pale); }
.payroll-page .ph-switch-grid { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.payroll-page .ph-switch-grid p { max-width:760px; margin:0; color:var(--ph-muted); }
.payroll-page .ph-switch-grid p strong { color:var(--ph-ink); }
.payroll-page .ph-switch-grid > .ph-btn { flex:0 0 auto; }

/* Side-by-side comparison */
.payroll-page .ph-compare-section { border-top:1px solid var(--ph-line); background:var(--ph-surface); }
.payroll-page .ph-compare { overflow-x:auto; border:1px solid var(--ph-line); border-radius:var(--ph-radius); background:#fff; box-shadow:var(--ph-shadow); }
.payroll-page .ph-compare table { width:100%; min-width:720px; margin:0; border-collapse:collapse; font-size:.93rem; }
.payroll-page .ph-compare th, .payroll-page .ph-compare td { padding:15px 18px; border:0; border-bottom:1px solid var(--ph-line); background:#fff; color:var(--ph-muted); font-weight:400; text-align:left; vertical-align:top; }
.payroll-page .ph-compare thead th, .payroll-page .ph-compare thead td { background:var(--ph-pale); }
.payroll-page .ph-compare thead th { color:var(--ph-primary-dark); font-size:1.02rem; font-weight:800; }
.payroll-page .ph-compare tbody th { width:19%; color:var(--ph-ink); font-weight:700; }
.payroll-page .ph-compare tbody tr:last-child th, .payroll-page .ph-compare tbody tr:last-child td { border-bottom:0; }
.payroll-page .ph-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:900px) {
    .payroll-page .ph-hero-grid, .payroll-page .ph-advantage-grid { grid-template-columns:1fr; }
    .payroll-page .ph-hero-grid { gap:34px; }
    .payroll-page .ph-visual { max-width:620px; }
    .payroll-page .ph-feature-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .payroll-page .ph-lifecycle { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .payroll-page .ph-integrations { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .payroll-page .ph-shot-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .payroll-page .ph-cta-grid { flex-direction:column; align-items:flex-start; }
    .payroll-page .ph-wrap { width:min(100% - 28px, 1140px); }
    .payroll-page .ph-hero { padding:28px 0 52px; }
    .payroll-page .ph-buy { margin-bottom:34px; }
    .payroll-page .ph-section { padding:55px 0; }
    .payroll-page .ph-party-grid, .payroll-page .ph-checks, .payroll-page .ph-feature-grid { grid-template-columns:1fr; }
    .payroll-page .ph-lifecycle { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .payroll-page .ph-integrations { grid-template-columns:1fr 1fr; }
    .payroll-page .ph-visual { padding:17px; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .payroll-page .ph-btn, .payroll-page .ph-shot a { transition:none; }
    .payroll-page .ph-btn:hover, .payroll-page .ph-shot a:hover { transform:none; }
}

/* Outcomes, comparison and bands at smaller widths */
@media (max-width:900px) {
    .payroll-page .ph-outcomes { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .payroll-page .ph-demo { padding:30px 26px; }
}
@media (max-width:760px) {
    /* The comparison becomes one card per row, with each app's answer labelled */
    .payroll-page .ph-compare { overflow:visible; border:0; background:transparent; box-shadow:none; }
    .payroll-page .ph-compare table, .payroll-page .ph-compare tbody, .payroll-page .ph-compare tr, .payroll-page .ph-compare th, .payroll-page .ph-compare td { display:block; min-width:0; width:auto; }
    .payroll-page .ph-compare thead { display:none; }
    .payroll-page .ph-compare tbody tr { margin-bottom:12px; overflow:hidden; border:1px solid var(--ph-line); border-radius:15px; background:#fff; }
    .payroll-page .ph-compare tbody tr:last-child th, .payroll-page .ph-compare tbody tr:last-child td { border-bottom:0; }
    .payroll-page .ph-compare tbody th { width:auto; padding:12px 16px; border-bottom:1px solid var(--ph-line); background:var(--ph-pale); color:var(--ph-primary-dark); }
    .payroll-page .ph-compare tbody td { padding:12px 16px; border-bottom:1px solid #e9eef7; }
    .payroll-page .ph-compare tbody td:last-child { border-bottom:0; }
    .payroll-page .ph-compare tbody td::before { content:attr(data-label); display:block; margin-bottom:2px; color:var(--ph-primary); font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
}
@media (max-width:600px) {
    .payroll-page .ph-outcomes { grid-template-columns:1fr; }
    .payroll-page .ph-demo, .payroll-page .ph-switch-grid { flex-direction:column; align-items:flex-start; }
    .payroll-page .ph-demo { padding:24px 20px; }
    .payroll-page .ph-compare th, .payroll-page .ph-compare td { padding:13px 14px; }
}