/* The same card markup and breakpoints on the homepage, services and price page. */
.ls-pricing-cards,.ls-pricing-cards *{box-sizing:border-box}
.ls-pricing-cards{font-family:Manrope,system-ui,sans-serif;color:#101112;text-align:left}
.ls-pricing-cards [data-price-col]{min-width:0}
.ls-pricing-cards [data-price-col]>a:active{transform:scale(.985)}
.ls-pricing-cards [data-price-col]>a:focus-visible{outline:3px solid #315cff;outline-offset:4px}
.ls-service-pricing>h2{text-align:center;font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.04;margin-bottom:28px;font-weight:500}
.ls-service-pricing>.ls-kicker{text-align:center}
.ls-service-pricing>.ls-payment-terms{margin:20px auto}
@media(max-width:860px){
 .ls-pricing-cards{grid-template-columns:1fr!important}
 .ls-pricing-cards [data-price-col]{border-left:0!important}
 .ls-pricing-cards [data-price-col]+[data-price-col]{border-top:1px solid #e3e4df}
}

.ls-price-wall[data-pricing-kind="migration"]{max-width:24rem}

/* A price page is a continuous comparison, so adjacent blocks use one rhythm. */
.ls-pricing-page .ls-section{padding-block:32px}
.ls-pricing-page .ls-pricing-hero{padding-top:120px;padding-bottom:24px}
.ls-pricing-page .ls-pricing-hero h1{max-width:22ch}
.ls-pricing-page .ls-service-pricing>.ls-payment-terms{margin-bottom:0}
.ls-pricing-page .ls-service-pricing>.ls-note:last-child{margin-bottom:0}
.ls-pricing-page .ls-section-head{margin-bottom:28px}
.ls-pricing-page .ls-choice-grid{margin-top:28px}
.ls-pricing-page .ls-consult{padding:36px;margin-block:24px 40px}
@media(max-width:560px){
 .ls-pricing-page .ls-section{padding-block:24px}
 .ls-pricing-page .ls-pricing-hero{padding-top:104px;padding-bottom:16px}
 .ls-pricing-page .ls-consult{padding:24px;margin-block:16px 28px}
}

/* Clip the peeking illustration at its section, not at the pricing cards.
   The hidden fallback also contains it in browsers without overflow:clip. */
.ls-home-pricing,.ls-service-pricing{overflow:hidden;overflow:clip}