.pricing-section{padding:64px 0 48px}
.price-stick{padding-block:0}
.pricing-heading{margin-bottom:36px}
/* The page title is the heading of the plans block: an h1 with the size of a section heading (h2) */
.pricing-heading h1{font-size:clamp(36px,4.8vw,76px);line-height:1.02;letter-spacing:-.045em}
/* Side by side: the heading and cards scale with the window height, so the three plans fit on first
   view of common laptop windows (1280×720, 1366×657, 1536×730) instead of running past the fold */
@media(min-width:901px){
  .pricing-section{padding-top:clamp(20px,4.5vh,64px)}
  .pricing-heading{margin-bottom:clamp(16px,3.5vh,36px)}
  /* The title takes the full row; the lead and the yearly switch share the row under it */
  .pricing-heading{row-gap:0}
  .pricing-heading>div{display:contents}
  .pricing-heading h1{grid-column:1/-1;font-size:clamp(36px,min(4.8vw,6.6vh),76px)}
  .pricing-heading .lead{max-width:760px;margin-top:clamp(8px,1.6vh,18px)}
  .plan{padding:clamp(18px,3.2vh,30px) 28px clamp(18px,3vh,28px)}
  .plan-flag{top:clamp(16px,3vh,28px)}
  .plan-price{margin:clamp(8px,3.6vh,48px) 0 clamp(2px,.4vh,4px)}
  .plan-amount{font-size:clamp(44px,min(5vw,8vh),76px)}
  .plan-billing{margin-bottom:clamp(10px,2.2vh,22px);padding-bottom:clamp(10px,2vh,20px)}
  .plan-features{gap:clamp(4px,1vh,10px);margin-bottom:clamp(14px,2.6vh,26px)}
}
@media(min-width:901px) and (max-width:1400px){
  .plan{padding-inline:22px}
  .plan-flag{right:20px}
}
@media(min-width:901px) and (max-height:760px),(min-width:901px) and (max-width:1400px) and (max-height:900px){
  .pricing-heading .lead{font-size:16px;line-height:1.55}
  .plan-features li{font-size:13px;line-height:1.4}
  .plan .button{min-height:42px;padding-block:9px}
}
@media(min-width:901px) and (max-height:760px){
  .pricing-section{padding-top:clamp(16px,3vh,64px)}
  .plan-price{margin-top:clamp(8px,2.4vh,48px)}
}
@media(max-width:600px){.pricing-section{padding-top:36px}}