/* Approved year-end Hatch Hire offer. Scoped to the Pricing page. */
.sp-pricing{--offer-green:#00a344}
@font-face{font-family:HatchHand;src:url('/redesign/assets/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
/* Keep the live card and amount typography. Only the handwritten offer is new. */
.price-annotation-stage{position:relative;min-width:0;padding-bottom:106px}
.sp-pricing :is(.handwritten-hire-card,.handwritten-flex-card) .price .original-amount{font:inherit;letter-spacing:inherit;position:relative;text-decoration:none;display:inline-block}
.price-scribble{position:absolute;left:-4%;top:0;width:108%;height:100%;overflow:visible;fill:#101513;stroke:none;opacity:.94;pointer-events:none}
.sp-pricing :is(.handwritten-hire-card,.handwritten-flex-card) .price .price-unit{flex-basis:100%;margin-top:4px}
.sp-pricing :is(.handwritten-hire-card,.handwritten-flex-card) .price small{margin-top:3px}
.handwritten-offer{position:absolute;left:49%;right:-5px;top:-45px;display:flex;flex-direction:column;align-items:flex-start;transform:rotate(-6deg);transform-origin:50% 50%;font-family:HatchHand,cursive;color:var(--offer-green);pointer-events:none}
.handwritten-heading{font-size:29px;font-weight:650;line-height:1.05;margin-bottom:6px}
.handwritten-price-group,.handwritten-offer-copy{display:flex;flex-direction:column;align-items:flex-start}
.handwritten-price{font-family:inherit;font-size:82px;font-weight:650;line-height:.95;letter-spacing:-.025em;white-space:nowrap}
.handwritten-price small{font-size:21px;font-family:inherit;font-weight:500;letter-spacing:0}
.handwritten-underline{display:block;width:230px;height:16px;margin:-1px 0 2px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;opacity:.8}
.handwritten-saving{font-size:34px;font-weight:650;line-height:1.05;margin-top:1px}
.handwritten-limit{display:block;font-size:27px;font-weight:650;line-height:1.05;margin-top:10px}
.handwritten-deadline{font-size:25px;font-weight:650;line-height:1.05;margin-top:3px}
.sp-pricing .handwritten-hire-card .offer-end{font-size:12px;color:var(--fg-3);text-align:center;line-height:1.5;margin-top:14px}
.offer-terms{font-size:11px;color:var(--fg-3);text-align:center;margin-top:8px;line-height:1.5}
.offer-terms summary{list-style:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.offer-terms p{text-align:left;font-size:12px;line-height:1.6;padding-top:8px}

@media(max-width:680px){
 .handwritten-offer{left:0;right:0;top:-25px;display:grid;grid-template-columns:58% 42%;transform:none}
 .handwritten-price-group{grid-column:2;transform:rotate(-6deg);transform-origin:left center}
 .handwritten-offer-copy{grid-column:2;transform:rotate(-6deg);transform-origin:left top;margin-top:3px;padding-left:0}
 .handwritten-heading{font-size:23px;margin-bottom:5px}
 .handwritten-price{font-size:52px}
 .handwritten-price small{display:block;font-size:16px;line-height:1;text-align:right;letter-spacing:0;margin-top:2px}
 .handwritten-underline{width:125px;height:10px;margin:0 0 4px}
 .handwritten-saving{font-size:21px}
 .handwritten-limit{font-size:16px;margin-top:5px;line-height:1.15}
 .handwritten-deadline{font-size:16px;margin-top:4px;line-height:1.15}
 .price-annotation-stage{padding-bottom:94px}
 .sp-pricing :is(.handwritten-hire-card,.handwritten-flex-card) .price small{max-width:54%;line-height:1.6}
}
@media(max-width:380px){
 .sp-pricing .handwritten-offer{grid-template-columns:62% 38%}
 .sp-pricing .handwritten-price{font-size:48px}
 .sp-pricing .handwritten-underline{width:114px}
}

/* Same ink and brush strokes as Hire; size the underline to the shorter Flex amount. */
.handwritten-flex-card .handwritten-underline{width:min(100%,205px)}
@media(min-width:681px) and (max-width:1150px){
 .handwritten-flex-card .price-annotation-stage{padding-bottom:133px}
}
@media(max-width:680px){
 .sp-pricing .handwritten-flex-card .price-annotation-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px;padding-bottom:7px}
 .sp-pricing .handwritten-flex-card .price small{max-width:none}
 .sp-pricing .handwritten-flex-card .handwritten-offer{position:static;display:flex;transform:rotate(-5deg);transform-origin:left top;margin-top:-14px}
 .handwritten-flex-card .handwritten-price-group,.handwritten-flex-card .handwritten-offer-copy{transform:none}
 .handwritten-flex-card .handwritten-underline{width:125px;max-width:100%}
}
@media(max-width:380px){
 .sp-pricing .handwritten-flex-card .handwritten-offer{margin-top:-3px}
}