.payroll-2026 { --payroll-ink:#16253d; --payroll-blue:#2348bd; --payroll-line:#dfe6f5; color:var(--payroll-ink); font-family:Poppins,sans-serif; overflow:hidden; }
.payroll-2026 * { box-sizing:border-box; }
.payroll-2026 .payroll-shell { max-width:1240px; }
.payroll-2026 h1,.payroll-2026 h2,.payroll-2026 h3,.payroll-2026 p { margin-top:0; }
.payroll-2026 h1,.payroll-2026 h2,.payroll-2026 h3 { color:var(--payroll-ink); font-weight:700; letter-spacing:-.045em; }
.payroll-2026 h1 span,.payroll-2026 h2 span { color:var(--payroll-blue); }
.payroll-hero { position:relative; min-height:540px; padding:146px 0 82px; background:radial-gradient(circle at 86% 14%,#e5e8ff 0,rgba(229,232,255,0) 29%),radial-gradient(circle at 12% 8%,#fff0e2 0,rgba(255,240,226,0) 30%),linear-gradient(117deg,#fffaf4 0,#fcfbff 51%,#f2f3ff 100%); text-align:center; }
.payroll-hero:before { position:absolute; inset:0; background:linear-gradient(115deg,transparent 0 55%,rgba(70,99,204,.04) 55.1% 55.4%,transparent 55.5%); content:""; pointer-events:none; }
.payroll-hero-grid { position:relative; z-index:1; display:block; }
.payroll-hero-copy { max-width:920px; margin:0 auto; }
.payroll-eyebrow,.payroll-section-kicker { display:inline-flex; align-items:center; gap:7px; margin-bottom:16px; color:#263a7c; font-size:13px; font-weight:600; line-height:1.3; }
.payroll-eyebrow { padding:8px 16px; border:1.5px solid transparent; border-radius:999px; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#ff65bd,#5d64ff) border-box; color:#273044; }
.payroll-eyebrow span { color:#1b2739; font-size:17px; }
.payroll-hero h1 { max-width:830px; margin:0 auto 21px; font-size:clamp(43px,4.1vw,62px); line-height:1.08; }
.payroll-hero h1 span { display:block; }
.payroll-intro { max-width:765px; margin:0 auto 29px; font-size:16px; line-height:1.7; color:#3f4b5f; }
.payroll-hero-points { display:none; }
.payroll-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; }
.payroll-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:47px; padding:11px 20px; border:1px solid transparent; border-radius:999px; font-size:14px; font-weight:600; line-height:1.25; text-decoration:none!important; transition:transform .2s ease,box-shadow .2s ease; }
.payroll-btn:hover { transform:translateY(-2px); }
.payroll-btn-primary { background:var(--payroll-blue); box-shadow:0 11px 22px rgba(35,72,189,.18); color:#fff!important; }
.payroll-btn-secondary { border-color:#a9b8e8; background:#fff; color:#1d3fa3!important; }
.payroll-btn i { font-size:15px; }
.payroll-trust { padding:29px 0 24px; background:#fff; text-align:center; }
.payroll-trust>div>p { margin:0 auto 20px; color:#59677d; font-size:15px; line-height:1.5; }
.payroll-trust>div>p strong { color:#213c96; }
.payroll-trust .brand-section { position:relative!important; right:auto!important; bottom:auto!important; left:auto!important; display:block!important; clear:both!important; height:auto!important; min-height:64px; margin:0!important; padding:0!important; overflow:hidden!important; background:transparent!important; }
.payroll-trust .brand-section .container,.payroll-trust .brand-section .row { width:100%; max-width:none; margin:0; }
.payroll-trust .brand-section .col-sm-12 { padding:0; }
.payroll-trust .brand-slider { min-height:64px; margin:0!important; }.payroll-trust .brand-item { min-height:64px!important; }
.payroll-section { padding:92px 0; }.payroll-problem { background:#f5f7fc; }
.payroll-section-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:63px; align-items:center; }
.payroll-section-grid-reverse .payroll-copy-card { order:2; }.payroll-section-grid-reverse .payroll-media-card { order:1; }
.payroll-copy-card h2,.payroll-section-heading h2,.payroll-why-copy h2 { margin-bottom:19px; font-size:clamp(33px,3.2vw,49px); line-height:1.1; }
.payroll-copy-card>p:not(.payroll-section-kicker),.payroll-section-heading>p:not(.payroll-section-kicker),.payroll-why-copy>p:not(.payroll-section-kicker) { color:#53627b; font-size:15px; line-height:1.75; }
.payroll-check-list { display:grid; gap:12px; margin:25px 0; padding:0; list-style:none; }
.payroll-check-list li { position:relative; padding-left:29px; color:#44536c; font-size:13px; line-height:1.63; }
.payroll-check-list li:before { position:absolute; top:4px; left:0; width:17px; height:17px; border-radius:50%; background:#e5ebff; content:"✓"; color:#2748b8; font-size:11px; font-weight:700; line-height:17px; text-align:center; }
.payroll-check-list strong { color:#1d2c48; }.payroll-check-list-short { gap:16px; }
.payroll-text-link { display:inline-flex; align-items:center; gap:7px; color:#2448bd!important; font-size:14px; font-weight:600; text-decoration:none!important; }
.payroll-media-card { min-height:400px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--payroll-line); border-radius:26px; }
.payroll-media-card img { width:100%; height:auto; }.payroll-media-warm { background:radial-gradient(circle at 80% 10%,#fff0c7,transparent 32%),#fff; }.payroll-media-blue { background:linear-gradient(150deg,#eff4ff,#e4edff); }
.payroll-platform { background:#fff; }.payroll-section-heading { max-width:720px; margin:0 auto 42px; text-align:center; }.payroll-section-heading>p:last-child { margin-bottom:0; }
.payroll-platform-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:stretch; }
.payroll-platform-art { display:flex; align-items:center; min-height:490px; overflow:hidden; border-radius:28px; background:linear-gradient(130deg,#edf8ff,#fff 68%); }
.payroll-platform-art img { width:100%; height:auto; mix-blend-mode:multiply; }.payroll-platform-list { display:grid; gap:13px; }
.payroll-platform-list article { display:flex; gap:15px; padding:20px; border:1px solid var(--payroll-line); border-radius:18px; background:#fff; }
.payroll-platform-list article span { display:flex; flex:0 0 34px; width:34px; height:34px; align-items:center; justify-content:center; border-radius:10px; background:#e6ecff; color:#294bc1; font-size:12px; font-weight:700; }
.payroll-platform-list h3 { margin-bottom:5px; font-size:18px; letter-spacing:-.03em; }.payroll-platform-list p { margin-bottom:0; color:#58677f; font-size:13px; line-height:1.55; }
.payroll-features { background:linear-gradient(140deg,#07133d,#0c2678 70%,#0b1e59); }
.payroll-section-heading-light h2,.payroll-section-heading-light p,.payroll-section-heading-light .payroll-section-kicker { color:#fff; }.payroll-section-heading-light h2 span { color:#94b1ff; }.payroll-section-heading-light>p:last-child { color:#c8d5fb; }
.payroll-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.payroll-feature-card { display:flex; min-height:230px; flex-direction:column; padding:24px; border:1px solid rgba(195,211,255,.19); border-radius:20px; background:rgba(255,255,255,.07); color:#fff!important; text-decoration:none!important; transition:transform .2s ease,background .2s ease; }
.payroll-feature-card:hover { transform:translateY(-4px); background:rgba(255,255,255,.13); }.payroll-feature-card img { width:47px; height:47px; object-fit:contain; margin-bottom:21px; }
.payroll-feature-card h3 { margin-bottom:9px; color:#fff; font-size:17px; line-height:1.2; letter-spacing:-.025em; }.payroll-feature-card p { margin:0; color:#d0dbfc; font-size:12px; line-height:1.55; }
.payroll-control { background:#f6f8fe; }.payroll-execution { background:#fff; }.payroll-why { padding-top:44px; background:#fff; }
.payroll-why-panel { display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; border:1px solid #dce5fa; border-radius:29px; background:linear-gradient(118deg,#f1f5ff,#fff8ef); }
.payroll-why-art { min-height:520px; display:flex; align-items:center; background:#e7edff; }.payroll-why-art img { width:100%; height:auto; }.payroll-why-copy { padding:58px 51px; }
.payroll-why-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-top:26px; }.payroll-why-list span { position:relative; padding:11px 11px 11px 29px; border-radius:10px; background:rgba(255,255,255,.75); color:#31415d; font-size:12px; line-height:1.45; }
.payroll-why-list span:before { position:absolute; top:13px; left:11px; width:11px; height:11px; border-radius:50%; background:#2649c1; content:""; }
.payroll-final-cta { position:relative; overflow:hidden; padding:81px 0; background:radial-gradient(circle at 13% 95%,#294aa9,transparent 25%),linear-gradient(110deg,#061033,#0a1b52); color:#fff; text-align:center; }
.payroll-final-cta:before { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:22px 22px; content:""; opacity:.25; }.payroll-final-cta .payroll-shell { position:relative; z-index:1; max-width:760px; }
.payroll-final-cta h2 { margin-bottom:15px; color:#fff; font-size:clamp(33px,3.5vw,50px); line-height:1.1; }.payroll-final-cta>div>p:not(.payroll-section-kicker) { margin:0 auto 26px; color:#cad5fc; font-size:16px; }.payroll-final-cta .payroll-section-kicker { color:#a9c0ff; }
.payroll-actions-center { justify-content:center; }.payroll-btn-white { background:#fff; color:#163ba9!important; }.payroll-btn-ghost { border-color:#7f97e3; background:transparent; color:#fff!important; }
@media (max-width:991px) {
  .payroll-hero { padding-top:60px; }.payroll-hero-grid,.payroll-section-grid,.payroll-platform-grid,.payroll-why-panel { grid-template-columns:1fr; }
  .payroll-hero-copy { text-align:center; }.payroll-hero h1,.payroll-intro { margin-right:auto; margin-left:auto; }.payroll-hero-points { max-width:610px; margin-right:auto; margin-left:auto; text-align:left; }.payroll-actions { justify-content:center; }
  .payroll-hero-art { max-width:650px; min-height:360px; margin:0 auto; }.payroll-section-grid-reverse .payroll-copy-card,.payroll-section-grid-reverse .payroll-media-card { order:initial; }.payroll-media-card { min-height:340px; }.payroll-platform-art { min-height:400px; }
  .payroll-feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.payroll-why-art { min-height:0; }.payroll-why-copy { padding:48px; }.payroll-why-art img { max-width:720px; margin:auto; }.payroll-control .payroll-media-card { order:2; }.payroll-control .payroll-copy-card { order:1; }
}
@media (max-width:767px) {
  .payroll-2026 .payroll-shell { padding-right:20px; padding-left:20px; }.payroll-hero { padding:48px 0 40px; }.payroll-hero h1 { font-size:40px; }.payroll-intro { font-size:15px; }.payroll-hero-points { grid-template-columns:1fr; gap:10px; }
  .payroll-hero-art { min-height:260px; margin-top:8px; }.payroll-hero-art:before { height:64%; border-radius:20px; }.payroll-hero-art img { width:118%; }.payroll-float { padding:8px 10px; font-size:10px; }
  .payroll-section { padding:60px 0; }.payroll-section-grid { gap:34px; }.payroll-copy-card h2,.payroll-section-heading h2,.payroll-why-copy h2 { font-size:34px; }.payroll-media-card { min-height:245px; border-radius:19px; }.payroll-platform-art { min-height:270px; border-radius:20px; }.payroll-platform-list article { padding:16px; }
  .payroll-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.payroll-feature-card { min-height:210px; padding:17px; border-radius:15px; }.payroll-feature-card h3 { font-size:15px; }.payroll-feature-card p { font-size:11px; }.payroll-why { padding-top:12px; }.payroll-why-copy { padding:34px 24px; }.payroll-why-list { grid-template-columns:1fr; }.payroll-final-cta { padding:65px 0; }.payroll-final-cta h2 { font-size:34px; }
}
@media (max-width:450px) { .payroll-hero h1 { font-size:34px; }.payroll-actions { display:grid; grid-template-columns:1fr; width:100%; }.payroll-btn { width:100%; }.payroll-feature-grid { grid-template-columns:1fr; }.payroll-feature-card { min-height:auto; }.payroll-section-heading { margin-bottom:28px; }.payroll-platform-list article { align-items:flex-start; }.payroll-platform-list h3 { font-size:16px; } }

/* Payroll 2026 design system — each visual slot can be swapped for its exported Figma asset. */
.enterprise-card .payroll-chat-asset{position:absolute;right:22px;bottom:18px;left:22px;width:calc(100% - 44px);height:100px;object-fit:cover;object-position:50% 100%;border:1px solid #e8ecf4;border-radius:9px;background:#fff;box-shadow:0 7px 16px rgba(26,49,91,.06)}
.enterprise-card-warm>img:not(.payroll-chat-asset){position:static;width:100%;height:150px;margin-top:16px;object-fit:contain;border:1px solid #f3e3bd;border-radius:14px;background:#fff}.enterprise-card-dark>img:not(.payroll-chat-asset){position:static;width:100%;height:150px;margin-top:16px;object-fit:contain;filter:none;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04)}.payroll-infrastructure-grid article{display:flex;flex-direction:column;min-height:254px}.payroll-infrastructure-asset{display:block;width:100%;height:150px;object-fit:contain;object-position:center center;margin:0 0 13px}.payroll-infrastructure-grid h3:after{display:block;width:30px;height:3px;margin-top:9px;border-radius:4px;background:linear-gradient(90deg,#ffbb36,#ff52ba,#4b91ff);content:""}.payroll-final-flower{position:absolute;top:-78px;left:-78px;width:250px;height:310px;object-fit:contain;opacity:.28;pointer-events:none}
.payroll-2026{background:#fff;color:#273248}.payroll-2026 section{padding:82px 0}.payroll-2026 h1,.payroll-2026 h2,.payroll-2026 h3{font-family:"Plus Jakarta Sans",Poppins,sans-serif}.payroll-2026 h2{letter-spacing:-.05em}.payroll-hero{min-height:540px;padding:146px 0 82px!important;text-align:center}.payroll-hero-copy{max-width:920px;margin:0 auto}.payroll-hero h1{max-width:830px;margin:0 auto 21px;font-size:clamp(43px,4.1vw,62px);line-height:1.08}.payroll-hero h1 span{display:block}.payroll-intro{max-width:765px;margin:0 auto 29px;font-size:16px;line-height:1.7;color:#3f4b5f}.payroll-eyebrow{padding:8px 16px;border:1.5px solid transparent;border-radius:999px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#ff65bd,#5d64ff) border-box;color:#273044}.payroll-actions{justify-content:center}.payroll-trust{padding:29px 0 24px!important;background:#fff;text-align:center}.payroll-trust>div>p{margin:0 auto 20px;color:#59677d;font-size:15px;line-height:1.5}.payroll-trust>div>p strong{color:#213c96}.payroll-trust .brand-section{position:relative!important;right:auto!important;bottom:auto!important;left:auto!important;display:block!important;clear:both!important;height:auto!important;min-height:64px;margin:0!important;padding:0!important;overflow:hidden!important;background:transparent!important}.payroll-trust .brand-section .container,.payroll-trust .brand-section .row{width:100%;max-width:none;margin:0}.payroll-trust .brand-section .col-sm-12{padding:0}.payroll-trust .brand-slider{min-height:64px;margin:0!important}.payroll-trust .brand-item{min-height:64px!important}.payroll-section-heading{max-width:810px;margin:0 auto 40px;text-align:center}.payroll-section-heading h2{margin:0 0 12px;font-size:clamp(31px,3vw,47px);line-height:1.13}.payroll-section-heading p{margin:0;color:#60708b;font-size:14px;line-height:1.65}.payroll-section-kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border:1.5px solid transparent;border-radius:100px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#ff65bd,#5d64ff) border-box;color:#6d416f!important;font-size:11px!important;font-weight:700!important}.payroll-proof{padding:58px 0 28px!important}.payroll-proof .payroll-section-heading{margin-bottom:22px}.payroll-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e6eaf2;border-bottom:1px solid #e6eaf2}.payroll-stat-grid article{display:flex;min-height:92px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-right:1px solid #e6eaf2;text-align:center}.payroll-stat-grid article:last-child{border-right:0}.payroll-stat-grid strong{color:#263042;font-size:25px;letter-spacing:-.05em}.payroll-stat-grid span{color:#68758c;font-size:12px}.payroll-enterprise{background:#fbfbfe}.payroll-enterprise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:900px;margin:auto}.enterprise-card{display:flex;flex-direction:column;position:relative;min-height:340px;overflow:hidden;padding:26px;border:1px solid #e9edf5;border-radius:15px;background:#fff}.enterprise-card h3{margin:0 0 8px;color:#273248;font-size:16px;line-height:1.28;letter-spacing:-.035em}.enterprise-card p{margin:0;color:#5f6e85;font-size:11px;line-height:1.55}.enterprise-card img{position:static;display:block;width:100%;height:150px;margin-top:16px;object-fit:contain;object-position:center;border:1px solid #e9edf5;border-radius:14px;background:#fff}.enterprise-card-warm{background:linear-gradient(135deg,#fff8e6 0,#fff 55%)}.enterprise-card-dark{background:linear-gradient(140deg,#071542,#102d85);border-color:#0e2b7d}.enterprise-card-dark h3,.enterprise-card-dark p{color:#fff}.enterprise-card-dark p{color:#c6d4ff}.enterprise-card-dark img{right:3%;bottom:-10px;width:54%;filter:drop-shadow(0 15px 18px rgba(0,0,0,.22))}.payroll-chat-preview{position:absolute;right:22px;bottom:18px;left:22px;height:97px;padding:15px;border:1px solid #e8ecf4;border-radius:9px;background:rgba(255,255,255,.86);box-shadow:0 7px 16px rgba(26,49,91,.06)}.payroll-chat-preview>span{display:inline-block;width:11px;height:11px;margin-right:6px;border-radius:50%;background:#c2aa93}.payroll-chat-preview p{display:inline;color:#b2bbcc;font-size:9px}.payroll-chat-preview>div{position:absolute;right:14px;bottom:12px;left:14px;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border:1px solid transparent;border-radius:20px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#ff78d7,#f5a71f,#4285f4) border-box;color:#a3acc0;font-size:8px}.payroll-infrastructure{position:relative;overflow:hidden;background:radial-gradient(circle at 16% 100%,#1747c7 0,transparent 32%),linear-gradient(125deg,#071033,#0b2169);color:#fff}.payroll-infrastructure:before{position:absolute;inset:0;background-image:linear-gradient(rgba(115,151,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(115,151,255,.12) 1px,transparent 1px);background-size:42px 42px;content:"";mask-image:linear-gradient(to top,black,transparent 64%)}.payroll-infrastructure .container{position:relative;z-index:1}.payroll-section-heading-light h2,.payroll-section-heading-light h2 span{color:#fff}.payroll-section-heading-light p{color:#c7d4ff}.payroll-section-heading-light .payroll-section-kicker{background:linear-gradient(rgba(7,16,51,.001),rgba(7,16,51,.001)) padding-box,linear-gradient(90deg,#ff65bd,#5d64ff) border-box;color:#cad5ff!important}.payroll-infrastructure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.payroll-infrastructure-grid article{min-height:330px;padding:21px;border:1px solid rgba(169,191,255,.25);border-radius:10px;background:rgba(255,255,255,.07)}.payroll-icon{display:grid;width:34px;height:34px;place-items:center;margin-bottom:18px;border-radius:8px;background:#3058c8;color:#fff}.payroll-infrastructure-grid h3{margin:0 0 8px;color:#fff;font-size:14px;line-height:1.35}.payroll-infrastructure-grid p{margin:0;color:#c7d4f9;font-size:11px;line-height:1.55}.payroll-governance{background:#fff}.payroll-governance-grid,.payroll-global-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:850px;margin:auto}.payroll-governance-grid article,.payroll-global-grid article{padding:22px;border:1px solid #e1e7f2;border-radius:11px;background:#fff;box-shadow:0 8px 20px rgba(23,46,85,.04)}.payroll-governance-grid span,.payroll-global-grid span{display:grid;width:34px;height:34px;place-items:center;margin-bottom:16px;border-radius:8px;background:#edf2ff;color:#3150c4}.payroll-governance-grid h3,.payroll-global-grid h3{margin:0 0 8px;font-size:14px;line-height:1.35}.payroll-governance-grid p,.payroll-global-grid p{margin:0;color:#65738a;font-size:11px;line-height:1.55}.payroll-compliance{background:#fbfbff}.payroll-compliance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.payroll-compliance-grid article{min-height:200px;padding:24px;border:1.5px solid #e2e8f2;border-radius:14px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.payroll-compliance-grid article:hover{border-color:#2348bd;box-shadow:0 12px 26px rgba(35,72,189,.12);transform:translateY(-3px)}.payroll-compliance-grid h3{margin:0 0 8px;font-size:15px;line-height:1.32;letter-spacing:-.02em}.payroll-compliance-grid p{margin:0;color:#66748a;font-size:12px;line-height:1.6}.compliance-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:16px;border-radius:50%}.compliance-icon img{width:24px;height:24px;object-fit:contain}.compliance-icon-blue{background:rgba(30,64,175,.1)}.compliance-icon-green{background:rgba(16,163,74,.1)}.compliance-icon-orange{background:rgba(230,150,10,.12)}.compliance-icon-purple{background:rgba(139,92,246,.12)}.compliance-icon-cyan{background:rgba(6,182,212,.12)}.compliance-icon-indigo{background:rgba(99,102,241,.12)}.payroll-ai{background:#f5f7fc}.payroll-ai-panel{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:46px;padding:42px 54px;border-radius:17px;background:#fff}.payroll-ai-copy h2{margin:0 0 15px;font-size:clamp(30px,3vw,43px);line-height:1.12}.payroll-ai-copy>p:not(.payroll-section-kicker){margin:0;color:#5d6a80;font-size:13px;line-height:1.65}.payroll-ai-copy ul{display:grid;gap:8px;margin:20px 0;padding:0;list-style:none}.payroll-ai-copy li{position:relative;padding-left:22px;color:#526078;font-size:12px}.payroll-ai-copy li:before{position:absolute;left:0;color:#2448bd;content:"✓"}.payroll-ai-visual{padding:13px;border-radius:8px;background:linear-gradient(135deg,#061645,#183eab)}.payroll-ai-visual img{display:block;width:100%;border-radius:4px}.payroll-global{background:#fff}.payroll-faq{background:#fbfbfe}.payroll-faq-list{max-width:900px;margin:auto;border-top:1px solid #dde4ee}.payroll-faq-list details{border-bottom:1px solid #dde4ee}.payroll-faq-list summary{display:flex;align-items:center;justify-content:space-between;padding:17px 5px;cursor:pointer;color:#273248;font-size:13px;font-weight:600;list-style:none}.payroll-faq-list summary::-webkit-details-marker{display:none}.payroll-faq-list summary i{color:#3150c4}.payroll-faq-list p{max-width:760px;margin:0;padding:0 5px 17px;color:#65738a;font-size:12px;line-height:1.6}.payroll-final-cta{padding:82px 0!important}.payroll-final-cta .payroll-section-kicker{color:#cad5ff!important;border-color:#6476b8}.payroll-final-cta h2{font-size:clamp(30px,3vw,46px)}.payroll-final-cta .payroll-btn-primary{background:#2c52ce}.payroll-btn-white{border:1px solid #fff;background:#fff;color:#193a9f!important}
@media(max-width:991px){.payroll-2026 section{padding:62px 0}.payroll-infrastructure-grid{grid-template-columns:repeat(2,1fr)}.payroll-ai-panel{grid-template-columns:1fr;padding:35px}.payroll-enterprise-grid{max-width:720px}.payroll-hero{min-height:auto;padding:108px 0 64px!important}}
@media(max-width:767px){.payroll-2026 section{padding:52px 0}.payroll-hero{padding:88px 0 54px!important}.payroll-hero h1{font-size:38px}.payroll-section-heading h2{font-size:32px}.payroll-stat-grid{grid-template-columns:1fr}.payroll-stat-grid article{border-right:0;border-bottom:1px solid #e6eaf2}.payroll-stat-grid article:last-child{border-bottom:0}.payroll-enterprise-grid,.payroll-governance-grid,.payroll-global-grid,.payroll-compliance-grid{grid-template-columns:1fr}.enterprise-card{min-height:320px}.payroll-infrastructure-grid{grid-template-columns:1fr}.payroll-ai-panel{padding:27px 22px}.payroll-ai-copy h2 br,.payroll-section-heading h2 br,.payroll-final-cta h2 br{display:none}.payroll-compliance-grid article{min-height:auto}.payroll-final-cta{padding:62px 0!important}}

/* ===== Kicker/eyebrow star icon (CSS-driven, not markup-dependent) ===== */
/* hide any legacy inline decorative star so it is never rendered twice */
.payroll-2026 .payroll-section-kicker span[aria-hidden="true"],
.payroll-2026 .payroll-eyebrow span[aria-hidden="true"] {
  display: none;
}

.payroll-2026 .payroll-section-kicker::before,
.payroll-2026 .payroll-eyebrow::before {
  content: "\2731";
  font-size: 10px;
  line-height: 1;
  color: currentColor;
}

/* ===== FAQ section: left-aligned heading ===== */
.payroll-faq .payroll-section-heading {
  margin: 0 0 30px;
  text-align: left;
}

/* ===== FAQ accordion: animated +/- toggle, font-independent ===== */
.payroll-faq-list summary { gap: 20px; }
.payroll-faq-list summary i {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  font-size: 0;
}
.payroll-faq-list summary i::before,
.payroll-faq-list summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: #3150c4;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.payroll-faq-list summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.payroll-faq-list details[open] summary i::after {
  transform: translate(-50%, -50%) rotate(0);
  opacity: 0;
}

/* ===== Global Payroll & EOR: left-aligned heading + hover cards ===== */
.payroll-global .payroll-section-heading {
  margin: 0 0 30px;
  text-align: left;
}
.payroll-global .payroll-section-heading > p:last-child {
  margin: 0;
}

.payroll-global-grid {
  gap: 16px;
}

/* ===== Uniform section width: content is bounded only by the container
        (.container.payroll-shell) — no per-section max-width ===== */
.payroll-2026 .payroll-section-heading,
.payroll-2026 .payroll-section-heading > p,
.payroll-2026 .payroll-enterprise-grid,
.payroll-2026 .payroll-governance-grid,
.payroll-2026 .payroll-global-grid,
.payroll-2026 .payroll-compliance-grid,
.payroll-2026 .payroll-infrastructure-grid,
.payroll-2026 .payroll-feature-grid,
.payroll-2026 .payroll-faq-list,
.payroll-2026 .payroll-faq-list p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.payroll-global-grid article {
  padding: 24px;
  border: 1.5px solid #e8ecf4;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.payroll-global-grid article:hover {
  border-color: #2f57d4;
  background: #f6f9ff;
  box-shadow: 0 10px 26px rgba(23, 46, 85, .07);
}
.payroll-global-grid article:hover h3 {
  color: #2f57d4;
}

/* icons ship with their own tinted circle, so the wrapper stays transparent */
.payroll-global-grid span {
  display: block;
  width: max-content;
  height: auto;
  margin-bottom: 16px;
  border-radius: 0;
  background: none;
}
.payroll-global-grid span img {
  display: block;
  width: 48px;
  height: 48px;
}

.payroll-global-grid h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: #273248;
  transition: color .2s ease;
}
.payroll-global-grid p {
  font-size: 12px;
  line-height: 1.6;
  color: #65738a;
}

/* ===== "One dashboard" — payroll visibility band (Figma node 6018:39153) ===== */
.payroll-dashview {
  background: #f7f9fd;
}
.payroll-dashview .payroll-dashview-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.payroll-dashview-copy h2 {
  margin: 0 0 24px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #343a40;
}
.payroll-dashview-copy h2 span {
  display: block;
  color: #1e40af;
}
.payroll-dashview-list {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.payroll-dashview-list li {
  position: relative;
  padding-left: 34px;
  color: #48546b;
  font-size: 15px;
  line-height: 1.6;
}
.payroll-dashview-list li > i {
  position: absolute;
  top: 3px;
  left: 0;
  color: #1e40af;
  font-size: 19px;
  line-height: 1;
}
.payroll-dashview-list li strong {
  color: #1e40af;
  font-weight: 600;
}
.payroll-dashview .payroll-btn-primary {
  background: #1e40af;
  box-shadow: 0 11px 22px rgba(30, 64, 175, .18);
}
.payroll-dashview-visual {
  overflow: hidden;
  border-radius: 20px;
  line-height: 0;
}
.payroll-dashview-visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 991px) {
  .payroll-dashview .payroll-dashview-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 767px) {
  .payroll-dashview-copy h2 span {
    display: inline;
  }
  .payroll-dashview-list li {
    font-size: 14px;
  }
}

/* ===== Enterprise Payroll bento grid (Figma node 6018:38300) ===== */
#payroll-enterprise .payroll-section-heading {
  margin: 0 auto 42px;
}
#payroll-enterprise .payroll-section-kicker {
  padding: 8px 18px;
  font-size: 14px !important;
  color: #343a40 !important;
}
#payroll-enterprise .payroll-section-heading h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #343a40;
}
#payroll-enterprise .payroll-section-heading h2 span {
  display: block;
  color: #1e40af;
}
#payroll-enterprise .payroll-section-heading > p:not(.payroll-section-kicker) {
  color: #656971;
  font-size: 17px;
  line-height: 1.5;
}

#payroll-enterprise .payroll-enterprise-grid {
  display: flex;
  max-width: none;
  flex-direction: column;
  gap: 24px;
}
#payroll-enterprise .payroll-enterprise-row {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
#payroll-enterprise .payroll-enterprise-row > .enterprise-card {
  flex: 1 1 0;
  min-width: 0;
}
#payroll-enterprise .enterprise-card--wide {
  flex-grow: 1.32;
}

#payroll-enterprise .enterprise-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 40px 40px 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #f6f7f9;
}
#payroll-enterprise .enterprise-card--warm { background: #faecd1; }
#payroll-enterprise .enterprise-card--dark { background: #0a1a3c; }

#payroll-enterprise .enterprise-card__body {
  max-width: 482px;
}
#payroll-enterprise .enterprise-card__body h3 {
  margin: 0 0 12px;
  color: #0b0b0b;
  font-family: "Plus Jakarta Sans", Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -.01em;
}
#payroll-enterprise .enterprise-card__body p {
  margin: 0;
  color: #454b54;
  font-size: 16px;
  line-height: 1.5;
}
#payroll-enterprise .enterprise-card--dark .enterprise-card__body h3 { color: #fff; }
#payroll-enterprise .enterprise-card--dark .enterprise-card__body p { color: rgba(255, 255, 255, .72); }

#payroll-enterprise .enterprise-card__media {
  margin-top: auto;
  padding-top: 34px;
  line-height: 0;
}
#payroll-enterprise .enterprise-card__media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: transparent;
}
#payroll-enterprise .enterprise-card__media--accent {
  border: 2.5px solid #fe6cca;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
#payroll-enterprise .enterprise-card__media--accent img {
  border-radius: 15px 15px 0 0;
}

@media (max-width: 991px) {
  #payroll-enterprise .payroll-enterprise-row { flex-direction: column; }
  #payroll-enterprise .payroll-enterprise-row > .enterprise-card,
  #payroll-enterprise .enterprise-card--wide { flex-grow: 1; }
  #payroll-enterprise .enterprise-card { padding: 34px 30px 0; }
  #payroll-enterprise .enterprise-card__body { max-width: 620px; }
}

@media (max-width: 600px) {
  #payroll-enterprise .payroll-section-heading { margin-bottom: 30px; }
  #payroll-enterprise .payroll-section-heading h2 span { display: inline; }
  #payroll-enterprise .payroll-enterprise-grid { gap: 18px; }
  #payroll-enterprise .enterprise-card { padding: 28px 22px 0; border-radius: 20px; }
  #payroll-enterprise .enterprise-card__body h3 { font-size: 19px; }
  #payroll-enterprise .enterprise-card__body p { font-size: 15px; }
  #payroll-enterprise .enterprise-card__media { padding-top: 24px; }
}

/* ===== Expense Management infrastructure section (Figma node 6018:38844) ===== */
.payroll-infrastructure {
  position: relative;
  overflow: hidden;
  background: #050b1f url('/images/payroll/infra-bg.png') center bottom / cover no-repeat;
  color: #fff;
}
.payroll-infrastructure::before { content: none; }
.payroll-infrastructure::after {
  content: "";
  position: absolute;
  top: -90px;
  left: -92px;
  width: 286px;
  height: 282px;
  background: url('/images/payroll/infra-flower.svg') center / contain no-repeat;
  transform: rotate(-157.56deg);
  opacity: .5;
  pointer-events: none;
}
.payroll-infrastructure .container {
  position: relative;
  z-index: 1;
}

.payroll-infrastructure .payroll-section-heading {
  max-width: 780px;
  margin: 0 auto 44px;
}
.payroll-infrastructure .payroll-section-kicker {
  padding: 9px 18px;
  font-size: 15px !important;
  color: #1c1c1c !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #ff6bc9, #7c58ff) border-box;
}
.payroll-infrastructure .payroll-section-heading h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #fff;
}
.payroll-infrastructure .payroll-section-heading h2 span {
  color: #60a5fa;
}
.payroll-infrastructure .payroll-section-heading > p:not(.payroll-section-kicker) {
  color: rgba(255, 255, 255, .92);
  font-size: 17px;
  line-height: 1.55;
}

.payroll-infrastructure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.payroll-infrastructure-grid article {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid #12266e;
  border-radius: 16px;
  background: rgba(18, 38, 110, .32);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.payroll-infrastructure-asset {
  display: block;
  width: 100%;
  height: 176px;
  margin: 0;
  object-fit: contain;
  object-position: center top;
}
.payroll-infrastructure-grid h3 {
  margin: 0;
  color: #fff;
  font-family: "Plus Jakarta Sans", Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.payroll-infrastructure-grid h3::after {
  display: block;
  width: 50px;
  height: 4px;
  margin-top: 16px;
  border-radius: 4px;
  background: #9e7cfb;
  content: "";
}
.payroll-infrastructure-grid article:nth-child(2) h3::after { background: #39c3fb; }
.payroll-infrastructure-grid article:nth-child(3) h3::after { background: #1ee0ac; }
.payroll-infrastructure-grid article:nth-child(4) h3::after { background: #fd9d2d; }
.payroll-infrastructure-grid p {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .payroll-infrastructure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .payroll-infrastructure-grid { grid-template-columns: 1fr; gap: 16px; }
  .payroll-infrastructure-grid article { padding: 24px; gap: 18px; }
  .payroll-infrastructure-asset { height: 210px; }
  .payroll-infrastructure .payroll-section-heading { margin-bottom: 32px; }
  .payroll-infrastructure .payroll-section-heading h2 br { display: none; }
}

/* ===== Payroll Governance checkpoints (Figma node 6018:38996) ===== */
.payroll-governance {
  background: #f9fafb;
}
.payroll-governance .payroll-section-heading {
  max-width: 820px;
  margin: 0 auto 44px;
}
.payroll-governance .payroll-section-kicker {
  padding: 9px 18px;
  font-size: 15px !important;
  color: #1c1c1c !important;
}
.payroll-governance .payroll-section-heading h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #343a40;
}
.payroll-governance .payroll-section-heading h2 span {
  color: #1e40af;
}
.payroll-governance .payroll-section-heading > p:not(.payroll-section-kicker) {
  color: #656971;
  font-size: 17px;
  line-height: 1.55;
}

.payroll-governance-grid {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.payroll-governance-grid article {
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  overflow: hidden;
  border: 1px solid #e1e6f4;
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.payroll-governance-grid article:hover,
.payroll-governance-grid article:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 15.3px rgba(24, 72, 212, .1);
  transform: translateY(-2px);
}
.payroll-governance-num {
  position: absolute;
  top: 34px;
  right: 40px;
  color: #1e40af;
  font-family: "Plus Jakarta Sans", Poppins, sans-serif;
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  opacity: .1;
  pointer-events: none;
}
.payroll-governance-grid .payroll-governance-icon {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.payroll-governance-grid .payroll-governance-icon img {
  display: block;
  width: 50px;
  height: 50px;
}
/* icon 1 is a single-colour glyph — recolour it via mask so it stays neutral
   at rest and turns blue only on hover, matching icons 2 & 3 */
.payroll-governance-grid .payroll-governance-icon--mono {
  background-color: #343a40;
  -webkit-mask: url('/images/payroll/gov-icon-1.svg') center / contain no-repeat;
  mask: url('/images/payroll/gov-icon-1.svg') center / contain no-repeat;
  transition: background-color .25s ease;
}
.payroll-governance-grid article:hover .payroll-governance-icon--mono,
.payroll-governance-grid article:focus-within .payroll-governance-icon--mono {
  background-color: #1e40af;
}
.payroll-governance-grid h3 {
  margin: 0;
  color: #343a40;
  font-family: "Plus Jakarta Sans", Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
}
.payroll-governance-grid article:hover h3,
.payroll-governance-grid article:focus-within h3 {
  color: #1e40af;
}
.payroll-governance-grid p {
  margin: 0;
  color: #364969;
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .payroll-governance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .payroll-governance-grid article { padding: 32px; }
  .payroll-governance-num { top: 28px; right: 30px; font-size: 40px; }
}
@media (max-width: 767px) {
  .payroll-governance-grid { grid-template-columns: 1fr; }
  .payroll-governance .payroll-section-heading { margin-bottom: 32px; }
  .payroll-governance .payroll-section-heading h2 br { display: none; }
  .payroll-governance-grid article { padding: 28px; min-height: 0; }
}

/* ===== Payroll Compliance grid (Figma node 7776:1141) ===== */
.payroll-compliance {
  background: #fff;
}
.payroll-compliance .payroll-section-heading {
  max-width: 840px;
  margin: 0 auto 44px;
}
.payroll-compliance .payroll-section-kicker {
  padding: 9px 18px;
  font-size: 15px !important;
  color: #1c1c1c !important;
}
.payroll-compliance .payroll-section-heading h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #343a40;
}
.payroll-compliance .payroll-section-heading h2 span {
  color: #1e40af;
}
.payroll-compliance .payroll-section-heading > p:not(.payroll-section-kicker) {
  color: #656971;
  font-size: 17px;
  line-height: 1.55;
}

.payroll-compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.payroll-compliance-grid article {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 15px;
  padding: 40px;
  border: 1px solid #e1e6f4;
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.payroll-compliance-grid article:hover,
.payroll-compliance-grid article:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 15.3px rgba(24, 72, 212, .1);
  transform: translateY(-2px);
}
.payroll-compliance-grid .compliance-icon {
  display: inline-flex;
  width: 80px;
  height: 80px;
  margin: 0 0 9px;
  align-items: center;
  justify-content: center;
  flex: 0 0 80px;
  border-radius: 50px;
}
.payroll-compliance-grid .compliance-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.payroll-compliance-grid .compliance-icon-blue { background: rgba(78, 139, 253, .1); }
.payroll-compliance-grid .compliance-icon-green { background: rgba(64, 174, 105, .1); }
.payroll-compliance-grid .compliance-icon-orange { background: rgba(254, 114, 5, .1); }
.payroll-compliance-grid .compliance-icon-purple { background: rgba(158, 124, 251, .1); }
.payroll-compliance-grid .compliance-icon-cyan { background: rgba(57, 195, 251, .1); }
.payroll-compliance-grid .compliance-icon-indigo { background: rgba(30, 64, 175, .1); }
.payroll-compliance-grid h3 {
  margin: 0;
  color: #343a40;
  font-family: "Plus Jakarta Sans", Poppins, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
}
.payroll-compliance-grid p {
  margin: 0;
  color: #364969;
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .payroll-compliance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .payroll-compliance-grid article { padding: 32px; }
}
@media (max-width: 767px) {
  .payroll-compliance-grid { grid-template-columns: 1fr; }
  .payroll-compliance .payroll-section-heading { margin-bottom: 32px; }
  .payroll-compliance .payroll-section-heading h2 br { display: none; }
  .payroll-compliance-grid article { padding: 28px; }
}
