.checkout-page{max-width:none;margin:0;padding:24px 3% 70px}.checkout-page .breadcrumb{padding:0 0 24px}.register{max-width:760px;margin:auto;padding:30px 34px;background:#f5f2eb;border:1px solid var(--line)}.register h1{font:400 clamp(27px,3vw,40px)/1.15 var(--serif);max-width:630px;margin:12px 0 25px}.register label{display:block;font-size:13px;margin-bottom:10px}.offer-controls{display:flex;gap:10px}.offer-controls input{min-width:0;width:180px;padding:12px;border:1px solid #999;background:var(--paper);font-size:22px}.offer-controls .button{background:var(--ink);color:white}#offer-note{font-size:12px;line-height:1.6;color:#62645b}.offer-result{display:grid;justify-items:center;margin-top:25px}.face-stage{position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;background:#ddd}.face-layer{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .3s ease,transform .3s ease;overflow:hidden}.face-layer.active{opacity:1;transform:scale(1)}.face-layer img{position:absolute;width:200%;height:200%;max-width:none;left:0;top:0}.face-layer[data-face=thoughtful] img{left:-100%}.face-layer[data-face=happy] img{top:-100%}.face-layer[data-face=surprise] img{top:-100%;left:-100%}.face-layer[data-face=reject] img,.face-layer[data-face=polite] img{width:100%;height:100%;left:0;top:0}.receipt-line{font:16px/1.5 'DM Sans',sans-serif;text-align:center;border-block:1px dashed #bbb5aa;padding:15px;width:100%;min-height:80px;margin:20px 0 0}.jokes-aside{max-width:760px;margin:28px auto 0;padding:25px 0}.jokes-aside h2{font:30px var(--serif);margin:8px 0}.jokes-aside p{line-height:1.6}.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.contact-actions .dark{background:var(--ink);color:white}.jokes-aside .text-link{text-decoration:underline;text-underline-offset:4px} @media(max-width:600px){.checkout-page{padding:20px 18px 50px}.register{padding:24px 18px}.offer-controls{flex-wrap:wrap}.offer-controls input{flex:1;width:110px}.offer-controls .button{padding:12px}.face-stage{width:130px;height:130px}.contact-actions .button{flex:1 1 140px}}@media(prefers-reduced-motion:reduce){.face-layer{transition:none;transform:none}}

.face-layer[data-face=mind] img,.face-layer[data-face=faint] img{width:100%;height:100%;left:0;top:0}

.face-stage{overflow:visible}.face-layer{border-radius:50%}.face-layer[data-face=faint]{border-radius:0;clip-path:url(#reaction-grip)}

.face-layer[data-face=rich] img,.face-layer[data-face=wealthy] img{width:100%;height:100%;left:0;top:0}

/* Compact checkout: offer and reaction share a row, contact stays directly below. */
.checkout-layout{min-height:100svh;display:flex;flex-direction:column}
.checkout-layout .checkout-page{width:100%;padding:12px 3% 18px;flex:1}
.checkout-page .breadcrumb{padding:0 0 10px;font-size:12px}
.register{max-width:1100px;padding:20px 26px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);column-gap:36px;align-items:center}
.register>.eyebrow{grid-column:1;margin:0 0 8px}
.register h1{grid-column:1;font-size:clamp(24px,2.5vw,34px);margin:0 0 18px}
.register #offer-form{grid-column:1}
.register .offer-result{grid-column:2;grid-row:1 / 4;margin:0}
.register .face-stage{width:clamp(130px,19vh,180px);height:clamp(130px,19vh,180px)}
.receipt-line{font-size:14px;line-height:1.4;min-height:60px;padding:10px 0;margin:12px 0 0}
#offer-note{margin:8px 0 0;line-height:1.4}
.jokes-aside{max-width:1100px;margin:14px auto 0;padding:0;display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:center}
.jokes-aside>.eyebrow{grid-column:1;margin:0;font-size:10px}
.jokes-aside h2{grid-column:1;font-size:24px;margin:0}
.jokes-aside p:not(.eyebrow){grid-column:1;margin:0;font-size:13px}
.jokes-aside .contact-actions{grid-column:2;grid-row:1 / 4;margin:0;gap:8px}
.jokes-aside .text-link{grid-column:1 / -1;font-size:12px;margin-top:6px}
.checkout-layout footer{padding:12px 3%;margin-top:0;border-top:1px solid var(--line)}
.checkout-layout footer>.footer-brand,.checkout-layout footer>p{display:none}
.checkout-layout .footer-bottom{margin:0;padding:0;border:0;font-size:11px}
@media(max-width:760px){
.register{padding:18px;column-gap:16px;grid-template-columns:minmax(0,1fr) 145px}
.register h1{font-size:24px}.offer-controls{flex-wrap:wrap}.offer-controls input{width:100%;flex:1}.offer-controls .button{padding:10px}
.jokes-aside{grid-template-columns:1fr}.jokes-aside .contact-actions{grid-column:1;grid-row:auto;margin-top:8px}.register .face-stage{width:130px;height:130px}
}
@media(max-width:480px){
.register{grid-template-columns:1fr}.register .offer-result{grid-column:1;grid-row:auto;margin-top:14px}.register h1{font-size:23px;margin-bottom:12px}.receipt-line{min-height:0}.checkout-layout .checkout-page{padding:10px 16px 16px}
}

.money-rain{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;contain:strict}
.falling-bill{position:absolute;width:var(--bill-width);opacity:0;perspective:500px}
.falling-bill img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 3px #0002);animation:bill-flutter var(--flutter) ease-in-out var(--phase) infinite alternate}
@keyframes bill-flutter{from{transform:rotateX(-25deg) rotateY(-32deg)}to{transform:rotateX(25deg) rotateY(32deg)}}
@media(prefers-reduced-motion:reduce){.money-rain{display:none}.falling-bill,.falling-bill img{animation:none}}

.receipt-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.checkout-heading{max-width:1100px;margin:0 auto 18px;font:400 28px/1.2 var(--serif)}
.checkout-columns{max-width:1100px;margin:auto;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:28px;align-items:start}
.checkout-inputs{display:grid;gap:16px}.checkout-block,.checkout-order{border:1px solid var(--line);background:#fff;padding:22px}
.checkout-block h2,.checkout-order h2{font:400 19px/1.3 'DM Sans',sans-serif;margin:0 0 18px}
.payment-fields{display:flex;align-items:end;gap:28px}.rate-period,.benefits{border:0;padding:0;margin:0}.rate-period legend,.benefits legend,.amount-label>span,.zip-label>span{display:block;font-size:12px;margin-bottom:10px}
.rate-period label,.benefits label{font-size:13px;margin-right:12px;display:inline-flex;align-items:center;gap:5px}.checkout-columns input[type=radio],.checkout-columns input[type=checkbox]{accent-color:#263e75}
.amount-label{flex:1;min-width:0}.amount-label input,.zip-label input{width:100%;padding:10px 12px;border:1px solid #aaa;background:#fff;font:16px 'DM Sans',sans-serif;border-radius:0}
.location-row,.pay-summary>div{display:flex;justify-content:space-between;gap:20px;font-size:13px;line-height:1.5;margin:10px 0}.location-row>span:last-child{text-align:right;max-width:65%}
.zip-label{display:block;margin-top:16px;max-width:250px}.remote-check{display:flex;align-items:center;gap:8px;font-size:13px;margin:12px 0}.shipment p{font-size:12px;line-height:1.5;margin:10px 0}.shipment small,.conversion-note{font-size:10px;line-height:1.5;color:#686860}.shipment small{display:block}
.pay-summary{border-block:1px solid var(--line);padding:6px 0}.pay-summary>div>span:last-child{font-variant-numeric:tabular-nums;text-align:right}.benefits{margin:16px 0}.checkout-order .offer-result{margin-top:18px}.checkout-order .face-stage{width:145px;height:145px}.checkout-order .receipt-line{font-size:13px;min-height:60px}
@media(max-width:750px){.checkout-columns{grid-template-columns:1fr;gap:16px}.checkout-block,.checkout-order{padding:18px}.payment-fields{gap:16px}.checkout-heading{font-size:25px}.checkout-order .offer-result{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}.checkout-order .face-stage{width:110px;height:110px}}

.checkout-columns input[type=radio]{appearance:none;width:14px;height:14px;border:1px solid #888;border-radius:2px;display:inline-grid;place-content:center;background:#fff}.checkout-columns input[type=radio]:checked{background:#263e75;border-color:#263e75}.checkout-columns input[type=radio]:checked:after{content:"";width:7px;height:4px;border-left:2px solid white;border-bottom:2px solid white;transform:translateY(-1px) rotate(-45deg)}.checkout-columns input[type=radio]:focus-visible{outline:2px solid #2459da;outline-offset:3px}

.selected-work{display:flex;align-items:center;gap:12px;font-size:13px;margin:0 0 20px}.selected-work>span:first-child{color:#686860}.selected-work a{margin-left:auto;font-size:12px;text-underline-offset:3px}
.payment-fields .amount-label{flex:0 0 155px}.rate-slider-label{flex:1;min-width:0;font-size:12px}.rate-slider-label>span:first-child{display:block;margin-bottom:12px}.rate-slider-label input{width:100%;accent-color:#263e75}.slider-limits{display:flex;justify-content:space-between;font-size:10px;color:#686860;margin-top:4px}
#offer-form #offer-note{margin:22px 0 0;font-size:12px;line-height:1.5}
@media(max-width:420px){.payment-fields .amount-label{flex-basis:125px}.selected-work{gap:8px;flex-wrap:wrap}}

.workplace-row{display:flex;align-items:flex-end;gap:24px}.workplace-row .zip-label{flex:1;min-width:0}.work-location-selection{font-size:13px;padding-bottom:12px;white-space:nowrap}.work-location-selection:empty{display:none}

.offer-contact{width:100%;margin-top:18px;background:var(--ink);color:white;border-color:var(--ink)}.offer-contact:hover{background:#2459da;border-color:#2459da}.offer-contact-note{font-size:10px;line-height:1.5;margin-top:9px;color:#686860}
.selected-work select,.workplace-row select{max-width:100%;border:1px solid var(--line);background:white;padding:9px;font-size:12px}.workplace-row select{margin-bottom:1px}.workplace-row.is-remote .zip-label{max-width:200px}.workplace-row.is-remote .zip-label>span{color:#686860}

.amount-label #pay-period{width:100%;margin-top:7px;padding:5px 8px;border:1px solid var(--line);background:white;font-size:12px}.payment-fields{align-items:center}#pay-equivalent{margin-top:10px}
.payment-fields .amount-label{flex-basis:220px;display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:0 7px}.amount-label>span{grid-column:1/-1}.amount-label #pay-period{margin:0;height:41px}.amount-label #offer-rate{min-width:0}@media(max-width:500px){.payment-fields{flex-wrap:wrap}.payment-fields .amount-label{flex-basis:100%}.rate-slider-label{flex-basis:100%}}

.inline-edit{font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:6px 0}.selected-work .inline-edit{margin-left:auto}.workplace-row .inline-edit{margin-left:auto;margin-bottom:7px}.inline-editor{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:12px;margin:12px 0 20px;background:#f7f8fa}.inline-editor[hidden]{display:none}.inline-editor select{flex:1;min-width:0;padding:9px;border:1px solid #aaa;background:white;font-size:13px}.editor-done{font-size:12px;padding:10px 15px;background:var(--ink);color:white}

.compact-choice{position:relative;display:inline-flex;align-items:center;max-width:190px}.compact-choice svg{position:absolute;right:2px;pointer-events:none}.selected-work .compact-choice select,.workplace-row .compact-choice select{appearance:none;border:0;background:transparent;padding:5px 19px 5px 2px;margin:0;font:400 13px 'DM Sans',sans-serif;width:auto;max-width:190px;cursor:pointer}.workplace-row .compact-choice{margin-bottom:7px}.compact-choice select:focus-visible{outline:2px solid #2459da;outline-offset:3px}.compact-choice:hover{color:var(--blue)}

.shipment .location-row{justify-content:flex-start;gap:8px;flex-wrap:wrap}.shipment .location-row>span:last-child{text-align:left;max-width:none}

.jokes-aside{grid-template-columns:1fr;justify-items:start}
.jokes-aside .contact-actions{grid-column:1;grid-row:auto;margin:14px 0 8px;justify-content:flex-start}

.jokes-aside .contact-actions .button{background:transparent;color:var(--ink);border:1px solid #b9bab3;min-height:38px;padding:9px 18px;font-size:12px}
.jokes-aside .contact-actions .button:hover{background:#efefea;border-color:var(--ink);color:var(--ink)}
.checkout-page input:focus-visible,.checkout-page select:focus-visible{outline:1px solid #55564f;outline-offset:2px;box-shadow:none}

.amount-label>.currency-input{position:relative;display:block;grid-column:auto;margin:0;min-width:0}
.currency-prefix{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#92938c;font-size:16px;pointer-events:none}
.amount-label .currency-input #offer-rate{padding-left:27px;width:100%}

/* Keep radio labels on the same baseline when the checkmark appears. */
.checkout-columns .benefits label{vertical-align:top;line-height:20px}
.checkout-columns .benefits input[type=radio]{position:relative;display:block;flex:0 0 14px;width:14px;height:14px;margin:0}
.checkout-columns .benefits input[type=radio]:checked:after{position:absolute;left:3px;top:3px;transform:rotate(-45deg)}

#pay-equivalent{margin-top:10px}#pay-equivalent-value{font-size:13px;font-weight:400;line-height:1.5;color:var(--ink);margin:0 0 4px}#pay-equivalent-basis{margin:0}

#pay-equivalent-value{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}

.checkout-order .receipt-line{border:0;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.3;padding:12px 0}

.face-layer:is([data-face=generous],[data-face=check]) img{width:100%;height:100%;left:0;top:0}

/* Display the untouched source photo with a portrait crop; no generated face. */
.face-layer[data-face=original] img{width:200%;height:auto;left:-50%;top:-100%;filter:grayscale(1)}

.checkout-order .face-layer[data-portrait="color"] img{width:100%;height:100%;left:0;top:0;object-fit:cover;filter:none}

/* Keep facial scale and eye level steady across individual reaction portraits. */
.checkout-order .face-layer[data-portrait="color"]{--portrait-size:108%;--portrait-x:-4%;--portrait-y:-2%}
.checkout-order .face-layer[data-portrait="color"] img{width:var(--portrait-size);height:var(--portrait-size);left:var(--portrait-x);top:var(--portrait-y)}
.checkout-order .face-layer[data-face="warm"]{--portrait-size:122%;--portrait-x:-11%;--portrait-y:0%}
.checkout-order .face-layer[data-face="happy"]{--portrait-size:104%;--portrait-x:-2%;--portrait-y:-4%}
.checkout-order .face-layer[data-face="reject"]{--portrait-size:104%;--portrait-x:-2%;--portrait-y:-4%}
.checkout-order .face-layer[data-face="polite"]{--portrait-size:108%;--portrait-x:-4%;--portrait-y:-1%}
.checkout-order .face-layer[data-face="generous"]{--portrait-size:100%;--portrait-x:0%;--portrait-y:0%}
.checkout-order .face-layer[data-face="wealthy"]{--portrait-size:108%;--portrait-x:-7%;--portrait-y:0%}

.checkout-order .face-layer[data-face="surprise"]{--portrait-size:120%;--portrait-x:-10%;--portrait-y:0%}

.checkout-order .face-layer[data-face="check"]{--portrait-size:110%;--portrait-x:-2%;--portrait-y:0%}


/* Mobile: keep the reaction and its control together, before offer details. */
@media(max-width:750px){
 .checkout-order>h2{display:none}
 .checkout-order .offer-result{display:flex;flex-direction:column;gap:0;margin:0}
 .checkout-order .face-stage{width:clamp(145px,40vw,180px);height:clamp(145px,40vw,180px)}
 .checkout-order .receipt-line{margin:8px 0 12px;min-height:58px;padding:4px 0;font-size:21px}
 .checkout-order .payment-fields{display:flex;flex-direction:column;align-items:stretch;gap:16px}
 .checkout-order .rate-slider-label{order:-1;flex:auto;width:100%}
 .checkout-order .payment-fields .amount-label{flex:auto;width:100%;grid-template-columns:minmax(0,1fr) 90px}
 .checkout-order .rate-slider-label input{height:32px;margin:0;touch-action:pan-y}
 .checkout-order #offer-form #offer-note{margin:12px 0;font-size:10px}
 .checkout-order .pay-summary{margin-top:14px}
 .checkout-order .offer-contact{margin-top:16px}
 .checkout-inputs .selected-work{margin-bottom:14px}
 .checkout-inputs .benefits{margin:0}
}

#offer-contact{position:relative;overflow:visible}
.landed-bill{position:absolute;top:-12px;width:62px;pointer-events:auto;cursor:pointer;z-index:1}
.landed-bill img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px #0003)}
.landed-bill-left{left:10px;transform:rotate(-14deg)}
.landed-bill-right{right:10px;transform:rotate(12deg)}

.slider-limits{align-items:center}
#slider-maximum{font-size:24px;line-height:1}

/* One horizontal control: slider plus editable amount. */
.payment-fields,.checkout-order .payment-fields{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:center;gap:18px;padding:18px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 3px 10px #22231f08}
.payment-fields .amount-label,.checkout-order .payment-fields .amount-label{position:static;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;width:132px;gap:2px;min-width:0}
.payment-fields .amount-label>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.payment-fields .amount-label .currency-input{width:100%;min-width:0}
.payment-fields .amount-label #offer-rate{border:0;background:transparent;font-size:19px;height:34px;padding-right:0;appearance:textfield;-moz-appearance:textfield}
.payment-fields #offer-rate::-webkit-inner-spin-button,.payment-fields #offer-rate::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.payment-fields .amount-label #pay-period{border:0;height:25px;background:transparent;padding:2px 8px;width:88px;align-self:center;font-size:12px;color:#686860}
.payment-fields .amount-label:focus-within{background:#f6f6f3;border-radius:4px}
.payment-fields .rate-slider-label,.checkout-order .payment-fields .rate-slider-label{grid-column:1;grid-row:1;display:block;width:100%;min-width:0}
.payment-fields .rate-slider-label>span:first-child{margin-bottom:4px;color:#686860;font-size:11px}
.payment-fields #rate-slider{display:block;width:100%;margin:0;height:28px;accent-color:#263e75;cursor:pointer}
@media(max-width:750px){.checkout-order .payment-fields{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px;padding:14px 12px}.checkout-order .payment-fields .amount-label{width:112px}.payment-fields .amount-label #offer-rate{font-size:17px}.checkout-order .rate-slider-label input{height:32px}}
