.pay-page{max-width:1160px;padding:32px 30px 0}.pay-intro{margin-bottom:36px}.kicker,.result-kicker{font-size:10px;font-weight:700;letter-spacing:1.8px}.kicker{color:#697263}.pay-intro h1{font-size:64px;line-height:1.02;letter-spacing:-2.8px;margin:17px 0}.pay-intro h1 span{color:#7b866e}.pay-intro p{font-size:18px;margin-bottom:10px}.privacy-note{font-size:12px;color:#646b62}.pay-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}.pay-controls h2{font-size:24px;margin-bottom:24px}.select-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.select-row label,.details-body>label{font-size:12px;display:block}.select-row select,.details-body select{display:block;width:100%;margin-top:8px;border:1px solid #c7b89d;border-radius:7px;padding:13px 10px;background:#fcfaf5;font-size:14px;min-height:48px}.input-hint{font-size:12px;color:#646b62;margin:20px 0 26px}.slider-field{margin-bottom:29px}.slider-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.slider-heading>label{font-size:15px;font-weight:700}.number-wrap{display:flex;align-items:center;gap:3px;font-size:15px;background:#f0ebdf;border-radius:7px;padding:5px 10px}.number-wrap input{width:68px;text-align:right;background:transparent;border:0;font-weight:700;padding:5px 0;font-size:18px;appearance:textfield;-moz-appearance:textfield}.number-wrap input::-webkit-inner-spin-button{appearance:none}.number-wrap span{font-size:12px;color:#646b62}input[type=range]{--fill:35%;appearance:none;-webkit-appearance:none;width:100%;height:10px;border-radius:8px;background:linear-gradient(to right,#28362f var(--fill),#e7dac4 var(--fill));margin:6px 0 12px;cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#c89b43;border:4px solid #f9f7ef;box-shadow:0 0 0 1px #b89452,0 3px 8px #28362f22}input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#c89b43;border:4px solid #f9f7ef;box-shadow:0 0 0 1px #b89452}input[type=range]:focus-visible{outline:2px solid #28362f;outline-offset:8px}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:#646b62}.field-note{font-size:11px;color:#646b62;margin:9px 0 0;line-height:1.6}.pay-details{border-top:1px solid #e7dac4}.pay-details>summary{display:flex;justify-content:space-between;align-items:center;list-style:none;padding:18px 0;font-size:13px;min-height:52px}.pay-details>summary::-webkit-details-marker{display:none}.pay-details[open]>summary span{transform:rotate(45deg)}.details-body{padding-bottom:20px}.details-body>.field{margin:8px 0 18px}.details-body fieldset{padding:0;border:0;margin:20px 0 0}.details-body legend{font-size:13px;font-weight:700;margin-bottom:10px}.details-body fieldset label{font-size:13px;display:flex;align-items:center;gap:10px;min-height:40px}.details-body input[type=checkbox]{width:18px;height:18px;accent-color:#28362f}.reset-pay{background:none;border:0;text-decoration:underline;font-size:12px;padding:14px 0;min-height:44px}.pay-result{background:#28362f;color:#f9f7ef;border-radius:16px;padding:30px;position:sticky;top:20px;overflow:hidden}.result-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.result-kicker{color:#d0d6c9;font-size:9px;letter-spacing:1.5px}.example-badge{font-size:9px;color:#e7dac4;border:1px solid #73816c;border-radius:20px;padding:4px 8px}.hourly-display{display:flex;align-items:baseline;gap:9px;margin:13px 0 0;flex-wrap:wrap}.hourly-display>span:first-child{font-size:62px;line-height:1.1;font-weight:700;letter-spacing:-2.5px;font-variant-numeric:tabular-nums}.hourly-display>span:last-child{font-size:16px;color:#d0d6c9}.result-subtitle{font-size:12px;color:#d0d6c9;margin:5px 0 0}.pay-art{height:178px;position:relative;isolation:isolate}.pay-art canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.art-fallback{height:100%;display:flex;justify-content:center;align-items:center;gap:8px}.art-fallback span{color:#c89b43;font-size:95px}.art-fallback i{height:45px;width:28px;border-radius:6px;background:#c89b43}.art-fallback i:nth-last-child(2){height:75px;background:#8da087}.art-fallback i:last-child{height:100px}.pay-art.has-webgl .art-fallback{display:none}.earnings-legend{display:flex;justify-content:center;gap:24px;font-size:11px;color:#d0d6c9;margin-bottom:23px;flex-wrap:wrap}.earnings-legend span{display:flex;gap:6px;align-items:center}.earnings-legend strong{color:#f9f7ef}.earnings-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.base-dot{background:#8da087}.tips-dot{background:#c89b43}.totals{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #56644f;border-bottom:1px solid #56644f;padding:18px 0;margin-bottom:21px;gap:15px}.totals>div>span{display:block;font-size:11px;color:#d0d6c9}.totals small{display:block;font-size:10px}.totals strong{display:block;font-size:25px;letter-spacing:-.5px;margin-top:6px;font-variant-numeric:tabular-nums}.compare-row{display:flex;justify-content:space-between;font-size:11px;gap:10px;margin:14px 0 7px}.bar-track{height:5px;background:#46543e;border-radius:5px;overflow:hidden}.bar-track>div{height:100%;border-radius:5px;transition:width .3s}.your-bar{background:#c89b43;width:100%}.benchmark-bar{background:#a4b398;width:60%}#comparison-line{font-size:15px;color:#f2d396;font-weight:700;margin:17px 0 10px}.result-note{font-size:10px;line-height:1.65;color:#c5cebd;margin-bottom:0}.benefit-result{border-top:1px solid #56644f;padding-top:16px;margin-top:18px}.benefit-result p{font-size:12px;color:#e7dac4;margin:8px 0 16px}.methodology{border-top:1px solid #e7dac4;margin-top:44px;font-size:12px;color:#646b62}.methodology>summary{padding:20px 0;min-height:52px}.methodology>div{max-width:850px;padding-bottom:10px}.methodology a{text-underline-offset:3px}.pay-outro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 0}.pay-outro h2{font-size:22px}.pay-outro p{font-size:13px;margin:0;color:#646b62}.pay-outro .btn span{color:#c89b43}#pay-error{font-size:12px;color:#8e4038}.pay-page [hidden]{display:none!important}.pay-page select:focus-visible,.pay-page input[type=number]:focus-visible{outline:2px solid #c89b43;outline-offset:3px}
@media(max-width:850px){.pay-layout{gap:28px}.pay-page{padding:24px 24px 0}.pay-intro h1{font-size:54px}.pay-result{padding:24px}.hourly-display>span:first-child{font-size:50px}}
@media(max-width:640px){header{flex-wrap:wrap}header nav{gap:18px}.pay-page{padding:22px 20px 0}.pay-intro{margin-bottom:30px}.kicker{font-size:8px;letter-spacing:1.3px}.pay-intro h1{font-size:46px;letter-spacing:-1.8px}.pay-intro p{font-size:15px}.privacy-note{font-size:11px}.pay-layout{grid-template-columns:1fr;gap:20px}.pay-result{position:static;padding:25px 22px;border-radius:12px}.pay-controls h2{font-size:22px}.select-row{gap:10px}.select-row select{font-size:13px}.slider-field{margin-bottom:24px}.hourly-display>span:first-child{font-size:61px}.pay-art{height:170px}.methodology{margin-top:28px}.pay-outro{flex-wrap:wrap;padding:25px 0}.pay-outro .btn{width:100%}.pay-outro h2{font-size:22px}.totals strong{font-size:25px}}
.workplace-label{display:block;font-size:12px;margin:18px 0 8px}.workplace-label span{color:#646b62}.pay-controls>.field{background:#fcfaf5}
.pay-dock{display:none}#pay-results{scroll-margin-top:18px}
.art-fallback i:nth-child(2){height:var(--base-height,45px);background:#8da087}.art-fallback i:nth-child(3){height:var(--tips-height,75px);background:#c89b43}.art-fallback i:last-child{display:none}
@media(max-width:640px){body:has(.pay-page){padding-bottom:82px}.pay-dock{position:fixed;z-index:5;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:58px;padding:14px 18px;background:#28362f;color:#f9f7ef;border:1px solid #73816c;border-radius:9px;box-shadow:0 3px 20px #28362f33;font-size:12px}.pay-dock strong{color:#f2d396;font-size:11px}}
@media(prefers-reduced-motion:reduce){.bar-track>div{transition:none}}
@media(max-width:640px){body:has(.pay-page) header{flex-wrap:nowrap;gap:10px}body:has(.pay-page) header .brand{font-size:22px}body:has(.pay-page) header .star{width:30px;height:30px}body:has(.pay-page) header nav{gap:12px}body:has(.pay-page) header .nav{font-size:11px}}
@media(max-width:359px){.pay-intro h1{font-size:38px;letter-spacing:-1.6px}.pay-page{padding-top:18px}.pay-intro{margin-bottom:24px}.hourly-display>span:first-child{font-size:52px}}