/* Penggajian shares the Sigma design system, with its own page compositions. */
.pay-page .art-hero { min-height:580px; }
.pay-page .art-object { color:#cce7f1; }
.pay-page .pay-case { background:#edf4f8; }
.pay-page .pay-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pay-page .art-layout-editorial .pay-steps,.pay-page .art-layout-folio .pay-steps { grid-template-columns:1fr; }
.pay-page .pay-related { background:#f5f9fc; }
.pay-page .pay-related h3 a { color:inherit; text-decoration:none; }
.pay-page .pay-related .branch-card { background:#fff; }
.pay-page .pay-related .branch-card:nth-child(2) { background:#e3eff6; }
.pay-reference { padding:0 0 30px; font-size:14px; color:#496574; }
.pay-reference a { color:inherit; text-decoration:none; font-weight:600; }
.pay-reference a:focus-visible { outline:2px solid #063755; outline-offset:4px; }
.pay-page .branch-products .branch-product { border-radius:32px; }

/* Payroll: white copy beside a dark financial illustration panel. */
.pay-payroll .art-hero { background:#edf4f8; color:#063755; }
.pay-payroll .art-hero-layout { grid-template-columns:1.2fr .8fr; }
.pay-payroll .art-hero .ed-lead { color:#355b70; }
.pay-payroll .art-object { background:#063755; border-radius:90px 28px 28px 28px; padding:30px 8px; }
.pay-payroll .branch-support { margin:0 28px; border-radius:40px; }

/* Payslips: a paper-like inset with a subtle ruled backdrop. */
.pay-payslips .art-hero { background:#063755; padding-top:130px; }
.pay-payslips .art-hero-layout { background:#f2f7fa; border-radius:30px; padding:45px; color:#063755; }
.pay-payslips .art-hero .ed-lead { color:#355b70; }
.pay-payslips .art-object { color:#063755; background:repeating-linear-gradient(0deg,transparent 0 39px,#c7dce660 40px); }
.pay-payslips .art-hero h1 { font-size:clamp(36px,4vw,58px); }

/* Reports: reverse editorial cover with a chart in an open frame. */
.pay-payroll-reports .art-hero { background:#f6f9fb; color:#063755; border-bottom:12px solid #a9ccdc; }
.pay-payroll-reports .art-hero-layout { grid-template-columns:.8fr 1.2fr; }
.pay-payroll-reports .art-object { order:-1; color:#063755; }
.pay-payroll-reports .art-hero .ed-lead { color:#355b70; }
.pay-payroll-reports .art-hero-copy { padding:28px 0; border-top:1px solid #bfd5e1; }

/* PPh21: dark calculation cover with a tall inset. */
.pay-income-tax .art-hero { background:linear-gradient(110deg,#063755 65%,#164e6a 65%); }
.pay-income-tax .art-object { padding:15px; border:1px solid #6c94ab; border-radius:32px 100px 32px 32px; }
.pay-income-tax .art-hero-copy { padding:30px 0; }
.pay-income-tax .branch-support .branch-card { background:none; border:0; }

/* BPJS: shield and people on a pale protection-themed cover. */
.pay-bpjs .art-hero { background:#e9f3f7; color:#063755; }
.pay-bpjs .art-hero-layout { grid-template-columns:.8fr 1.2fr; }
.pay-bpjs .art-object { order:-1; color:#063755; background:#d7e9f2; border-radius:160px 160px 50px 50px; }
.pay-bpjs .art-hero .ed-lead { color:#355b70; }
.pay-bpjs .branch-support { margin:0 28px; border-radius:32px; }

/* THR: a light rounded island with generous space around the gift. */
.pay-thr .art-hero { background:#dcecf4; padding-top:130px; }
.pay-thr .art-hero-layout { background:#fff; color:#063755; border-radius:80px 28px 80px 28px; padding:50px; grid-template-columns:1.25fr .75fr; }
.pay-thr .art-object { color:#063755; }
.pay-thr .art-hero .ed-lead { color:#355b70; }
.pay-thr .art-hero h1 { font-size:clamp(36px,4vw,58px); }

/* Bonus: a central typographic cover above a compact medal illustration. */
.pay-bonuses .art-hero { background:linear-gradient(140deg,#063755,#195776); padding-bottom:28px; }
.pay-bonuses .art-hero-layout { display:flex; flex-direction:column; gap:25px; }
.pay-bonuses .art-hero-copy { max-width:1040px; }
.pay-bonuses .art-object { width:260px; }
.pay-bonuses .art-object svg { height:210px; }
.pay-bonuses .art-hero h1 { font-size:clamp(36px,4.8vw,68px); }

/* Allowances: dark framed wallet on the left, unboxed copy on the right. */
.pay-allowances .art-hero { background:#f1f7fa; color:#063755; }
.pay-allowances .art-hero-layout { grid-template-columns:.85fr 1.15fr; }
.pay-allowances .art-object { order:-1; padding:30px 0; background:#063755; border-radius:28px 100px 28px 28px; }
.pay-allowances .art-hero .ed-lead { color:#355b70; }
.pay-allowances .art-hero-copy { padding-bottom:25px; border-bottom:5px solid #9cbfcf; }

/* Deductions: an outlined dark panel and a clearly identifiable receipt. */
.pay-deductions .art-hero { background:#063755; }
.pay-deductions .art-hero-layout { border:1px solid #7094a8; border-radius:35px; padding:45px; grid-template-columns:1.3fr .7fr; }
.pay-deductions .art-hero h1 { font-size:clamp(36px,4vw,58px); }
.pay-deductions .art-object::before { background-image:radial-gradient(currentColor 1px,transparent 1px); background-size:18px 18px; }

@media(max-width:1050px) {
 .pay-page .art-hero h1 { font-size:42px; }
 .pay-page .pay-steps { grid-template-columns:1fr; }
}
@media(max-width:760px) {
 .pay-page .art-hero { min-height:0; padding:130px 0 45px; }
 .pay-page .art-hero-layout { display:flex; flex-direction:column; gap:28px; }
 .pay-page .art-hero-copy { padding:0; }
 .pay-page .art-hero h1 { font-size:clamp(32px,7vw,46px); }
 .pay-page .art-object { order:0; width:75%; max-width:300px; padding:12px; }
 .pay-payslips .art-hero-layout,.pay-thr .art-hero-layout,.pay-deductions .art-hero-layout { padding:30px 22px; border-radius:30px; }
 .pay-page .pay-steps { grid-template-columns:1fr; }
 .pay-page .branch-support { margin:0; border-radius:0; }
 .pay-bonuses .art-object svg { height:180px; }
}