:root {
  --pw-ink:#17392d;
  --pw-muted:#5c6f66;
  --pw-green:#0a8f5a;
  --pw-green-dark:#087247;
  --pw-green-soft:#eaf8f1;
  --pw-orange:#e87520;
  --pw-orange-soft:#fff3e8;
  --pw-blue:#2678bd;
  --pw-blue-soft:#edf6ff;
  --pw-line:#d8e5de;
  --pw-panel:#fff;
}
.payroll-widgets-page { background:#f7faf8; color:var(--pw-ink); }
.payroll-widgets-page main { overflow:hidden; }
.pw-hero { background:linear-gradient(125deg,#0e6f4a 0%,#0a8f5a 52%,#1876a7 100%); color:#fff; padding:68px 22px 62px; position:relative; }
.pw-hero:after { content:""; position:absolute; inset:auto -8% -150px auto; width:420px; height:420px; border-radius:50%; background:rgba(255,153,61,.16); pointer-events:none; }
.pw-hero-inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:44px; align-items:center; position:relative; z-index:1; }
.pw-kicker { display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:850; text-transform:uppercase; letter-spacing:.09em; color:#c9f5df; }
.pw-hero h1 { font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(2.6rem,5vw,4.7rem); line-height:.98; letter-spacing:-.055em; margin:12px 0 18px; max-width:850px; }
.pw-hero-copy { max-width:760px; font-size:1.08rem; line-height:1.75; color:#ecfff5; margin:0; }
.pw-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:25px; }
.pw-btn { display:inline-flex; min-height:46px; align-items:center; justify-content:center; border-radius:11px; padding:11px 16px; font-weight:850; text-decoration:none; }
.pw-btn-primary { color:#733707; background:#ffad68; box-shadow:0 9px 24px rgba(79,38,4,.2); }
.pw-btn-primary:hover { background:#ffbd87; transform:translateY(-1px); }
.pw-btn-secondary { color:#fff; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.08); }
.pw-btn-secondary:hover { background:rgba(255,255,255,.15); }
.pw-hero-card { background:rgba(255,255,255,.96); color:var(--pw-ink); border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:24px; box-shadow:0 22px 55px rgba(3,55,34,.18); }
.pw-hero-card span { color:var(--pw-orange); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.pw-hero-card h2 { font-family:"Bricolage Grotesque",sans-serif; font-size:1.65rem; margin:7px 0 10px; }
.pw-hero-card ul { margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.pw-hero-card li { display:grid; grid-template-columns:26px 1fr; gap:9px; align-items:start; color:#435c51; font-size:.9rem; }
.pw-hero-card li b { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--pw-green-soft); color:var(--pw-green-dark); font-size:.74rem; }
.pw-shell { max-width:1160px; margin:0 auto; padding:48px 22px 76px; }
.pw-intro { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:24px; margin-bottom:42px; }
.pw-intro article,.pw-trust-card { background:#fff; border:1px solid var(--pw-line); border-radius:18px; padding:25px; }
.pw-intro h2,.pw-section-head h2,.pw-copy h2 { font-family:"Bricolage Grotesque",sans-serif; letter-spacing:-.03em; margin:6px 0 10px; }
.pw-intro p,.pw-copy p { color:var(--pw-muted); line-height:1.72; }
.pw-trust-card { background:var(--pw-blue-soft); border-color:#cce2f6; }
.pw-trust-card strong { display:block; color:#1d5f97; margin-bottom:7px; }
.pw-trust-card p { margin:0; color:#486c8b; line-height:1.62; }
.pw-widget-section { margin:52px 0; }
.pw-section-head { max-width:820px; margin-bottom:20px; }
.pw-section-head h2 { font-size:clamp(2rem,3.5vw,3rem); }
.pw-section-head p { color:var(--pw-muted); line-height:1.7; margin:0; }
.pw-widget-layout { display:grid; grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr); gap:24px; align-items:start; }
.pw-preview { background:#edf3f0; border:1px solid var(--pw-line); border-radius:20px; padding:14px; }
.pw-preview iframe { display:block; width:100%; border:0; border-radius:14px; background:#f7faf8; }
.pw-code-card { background:#fff; border:1px solid var(--pw-line); border-radius:20px; overflow:hidden; }
.pw-code-head { padding:20px 21px 14px; border-bottom:1px solid var(--pw-line); }
.pw-code-head span { color:var(--pw-orange); font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.pw-code-head h3 { margin:5px 0 6px; font-size:1.28rem; }
.pw-code-head p { margin:0; color:var(--pw-muted); font-size:.9rem; line-height:1.55; }
.pw-code-wrap { padding:18px 20px; background:#102e24; color:#eafff4; }
.pw-code-wrap code { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-family:"JetBrains Mono",monospace; font-size:.78rem; line-height:1.65; }
.pw-copy-button { margin:15px 20px 20px; border:0; border-radius:10px; min-height:42px; padding:9px 13px; background:var(--pw-green); color:#fff; font:inherit; font-weight:850; cursor:pointer; }
.pw-copy-button:hover { background:var(--pw-green-dark); }
.pw-copy-button[data-copied="true"] { background:var(--pw-blue); }
.pw-notes { padding:0 20px 22px; display:grid; gap:8px; }
.pw-note { display:grid; grid-template-columns:24px 1fr; gap:8px; color:#4c6258; font-size:.84rem; }
.pw-note span { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--pw-orange-soft); color:#a34c0b; font-weight:900; font-size:.72rem; }
.pw-guidance { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:48px 0; }
.pw-guidance article { background:#fff; border:1px solid var(--pw-line); border-radius:16px; padding:21px; }
.pw-guidance article:nth-child(1) { border-top:4px solid var(--pw-green); }
.pw-guidance article:nth-child(2) { border-top:4px solid var(--pw-orange); }
.pw-guidance article:nth-child(3) { border-top:4px solid var(--pw-blue); }
.pw-guidance h3 { margin:0 0 8px; }
.pw-guidance p { margin:0; color:var(--pw-muted); line-height:1.65; font-size:.91rem; }
.pw-terms { background:linear-gradient(120deg,#eef9f3,#fff5eb); border:1px solid #cee2d8; border-radius:20px; padding:26px; margin:48px 0; }
.pw-terms h2 { font-family:"Bricolage Grotesque",sans-serif; margin:0 0 10px; }
.pw-terms ul { margin:14px 0 0; color:#4a6156; line-height:1.7; }
.pw-copy { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:48px 0; }
.pw-copy article { background:#fff; border:1px solid var(--pw-line); border-radius:18px; padding:24px; }
.pw-copy h2 { font-size:1.55rem; }
.pw-related { display:flex; align-items:center; justify-content:space-between; gap:20px; background:#143b2f; color:#fff; border-radius:20px; padding:26px; }
.pw-related h2 { margin:0 0 7px; font-family:"Bricolage Grotesque",sans-serif; }
.pw-related p { margin:0; color:#d5efe3; }
.pw-related-links { display:flex; gap:9px; flex-wrap:wrap; }
.pw-related-links a { color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:10px; padding:9px 12px; text-decoration:none; font-weight:750; }
.pw-related-links a:hover { background:rgba(255,255,255,.1); }
@media (max-width:900px) {
  .pw-hero-inner,.pw-intro,.pw-widget-layout,.pw-copy { grid-template-columns:1fr; }
  .pw-guidance { grid-template-columns:1fr; }
  .pw-hero-card { max-width:620px; }
}
@media (max-width:620px) {
  .pw-hero { padding:50px 17px 46px; }
  .pw-shell { padding:34px 15px 62px; }
  .pw-preview { padding:8px; border-radius:15px; }
  .pw-related { align-items:flex-start; flex-direction:column; }
}