/* Giving Payroll V3.48 | Pricing clarity, consistent buttons, visible managed-service rates.
   This stylesheet is intentionally homepage-only. Other pages and JS stay untouched. */

/* Price receipt should read as one editorial sheet, not two stacked banners. */
#pricingUnfold.pricing-unfold{
  background:#fffefa;
  border:1px solid #e1e6e2;
  border-radius:23px;
  box-shadow:0 21px 60px rgba(28,46,55,.12);
  overflow:hidden;
}
#pricingUnfold.pricing-unfold::before{display:none;content:none;}
#pricingUnfold .unfold-heading{
  background:linear-gradient(110deg,#fffefa,#f6faf8);
  padding:clamp(28px,3vw,41px) clamp(24px,3.5vw,48px) clamp(27px,3vw,38px);
  column-gap:clamp(24px,4vw,64px);
  align-items:center;
}
#pricingUnfold .unfold-eyebrow{
  margin:0 0 clamp(18px,2vw,24px);
  font:800 12px/1.3 Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
  color:#d44d54;
}
#pricingUnfold .unfold-heading h3{margin-top:0;}
#pricingUnfold .unfold-figure{min-width:0;}

/* One consistent voice for the actions: readable like the hero buttons,
   not a mix of condensed, bold, serif and wildly different type sizes. */
:is(.receipt-signup,.unfold-signup,.intent-button,.service-start){
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(14px,1.05vw,16px)!important;
  font-style:normal!important;
  font-weight:750!important;
  line-height:1.25!important;
  letter-spacing:.016em!important;
  text-transform:none;
  text-align:center!important;
  justify-content:center!important;
  white-space:normal;
  text-wrap:balance;
}
/* The coral CTA is white on coral across the receipt, full-picture panel,
   and ready-to-start action. The hero keeps its approved colors and shape. */
:is(.receipt-signup,.unfold-signup,#pricingUnfold .intent-button:nth-child(2),.service-start){
  background:#eb5f60;
  border-color:#eb5f60;
  color:#fff!important;
  border-radius:13px;
  box-shadow:0 9px 19px rgba(177,56,67,.17);
}
:is(.receipt-signup,.unfold-signup,#pricingUnfold .intent-button:nth-child(2),.service-start):hover{
  background:#d84c52;
  border-color:#d84c52;
  box-shadow:0 11px 22px rgba(177,56,67,.24);
}
#pricingUnfold .intent-button:first-child{
  border-radius:13px;
  font-size:clamp(14px,1.05vw,16px)!important;
  color:#fff;
}
#pricingUnfold .unfold-signup{min-height:55px;}
.service-start{min-height:58px;}

/* Managed-service costs should not require an accordion click to discover.
   These are one-employee starting points for the existing proposals.
   All detailed calculators, disclaimers, and controls remain unchanged. */
.service-strip .service-toggle{
  grid-template-columns:minmax(290px,1.2fr) minmax(185px,.72fr) minmax(194px,.62fr) 28px;
  column-gap:clamp(14px,2.5vw,33px);
  padding:25px 4px;
  min-height:150px;
  align-items:center;
}
.service-strip .service-toggle .serv-title{
  min-width:0;
  font-size:clamp(35px,3.75vw,58px);
  line-height:1.06;
}
.service-strip .service-toggle .serv-explain{
  max-width:270px;
  font-size:clamp(13px,.99vw,15px);
  line-height:1.55;
}
.service-strip .serv-price-glance{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  padding-left:clamp(12px,1.65vw,23px);
  border-left:1px solid rgba(130,222,191,.35);
  font-style:normal;
  font-family:Arial,Helvetica,sans-serif;
  text-align:left;
}
.service-strip .serv-price-kicker{
  font:750 10px/1.3 Arial,Helvetica,sans-serif;
  letter-spacing:.095em;
  color:#9ce5cb;
}
.service-strip .serv-price-number{
  font:normal clamp(28px,2.9vw,41px)/1.02 Georgia,'Times New Roman',serif;
  letter-spacing:-.04em;
  color:#fff;
  white-space:nowrap;
}
.service-strip .serv-price-number small{
  font:normal clamp(12px,1vw,15px)/1.3 Arial,Helvetica,sans-serif;
  color:#d5dfdd;
  letter-spacing:0;
  margin-left:4px;
}
.service-strip .serv-price-extra{
  color:#c9d9d8;
  font:normal 11px/1.4 Arial,Helvetica,sans-serif;
  max-width:250px;
  text-wrap:balance;
}
.service-strip .service-toggle::after{
  grid-column:4;
  justify-self:end;
  font-size:30px;
}
.service-strip .service-row.is-open .serv-price-glance{border-color:rgba(159,231,205,.75);}
.service-strip .service-row:hover .serv-price-number{color:#a9f2d4;}
@media(max-width:1120px){
  .service-strip .service-toggle{
    grid-template-columns:minmax(0,1fr) minmax(180px,.48fr) 30px;
    column-gap:20px;
    row-gap:8px;
    min-height:132px;
  }
  .service-strip .service-toggle .serv-title{grid-column:1;grid-row:1;font-size:clamp(36px,4.7vw,52px);}
  .service-strip .service-toggle .serv-explain{grid-column:1;grid-row:2;max-width:490px;font-size:14px;}
  .service-strip .service-toggle .serv-price-glance{grid-column:2;grid-row:1 / span 2;}
  .service-strip .service-toggle::after{grid-column:3;grid-row:1 / span 2;}
}
@media(max-width:680px){
  .service-strip .service-toggle{
    grid-template-columns:minmax(0,1fr) 30px;
    gap:8px 12px;
    padding:22px 4px;
  }
  .service-strip .service-toggle .serv-title{grid-column:1;grid-row:1;font-size:clamp(32px,8.1vw,45px);}
  .service-strip .service-toggle .serv-explain{grid-column:1;grid-row:2;max-width:unset;font-size:13px;}
  .service-strip .service-toggle .serv-price-glance{
    grid-column:1;grid-row:3;
    flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:7px 12px;
    padding:10px 0 0;border-left:0;border-top:1px solid rgba(130,222,191,.35);
  }
  .service-strip .serv-price-kicker{flex:0 0 100%;}
  .service-strip .serv-price-number{font-size:32px;}
  .service-strip .serv-price-extra{flex:1 1 170px;max-width:none;}
  .service-strip .service-toggle::after{grid-column:2;grid-row:1;align-self:center;}
  #pricingUnfold .unfold-heading{padding:27px 21px;}
  #pricingUnfold .unfold-eyebrow{font-size:10px;margin-bottom:17px;}
  #pricingUnfold.pricing-unfold{border-radius:18px;}
  :is(.receipt-signup,.unfold-signup,.intent-button,.service-start){font-size:14px!important;}
}
@media(prefers-reduced-motion:reduce){
  :is(.receipt-signup,.unfold-signup,.intent-button,.service-start){transition:none!important;}
}