/* get the data (/pricing/): the three offers side by side with no figures, one "Ask for a quote" button, then the details in one readable column. Prices are set
   in the text face, semibold: dot type draws "$" and "," as clusters that read wrongly. */
.pricing { padding: calc(var(--top) + var(--sp-head)) var(--gutter) var(--sp-section); }
.pricing-head { max-width: 46rem; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); margin: var(--sp-head) 0 0; }
/* the one button gets a block of its own: a clear gap above it, and a section's space before "Try it first" */
.quote-row { margin: 0 0 var(--sp-section); padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--grey-2); }
.plan { padding: 28px clamp(18px, 2.4vw, 36px) 32px 0; display: flex; flex-direction: column; }
.plan + .plan { padding-left: clamp(18px, 2.4vw, 36px); border-left: 1px solid var(--grey-2); }
.plan h2 { margin: 0; font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: var(--label-weight); color: var(--label-color); }
.plan .price { margin: 14px 0 18px; display: flex; align-items: baseline; gap: 12px; }
.plan .price .amt { font-family: var(--text); font-weight: 600; font-size: clamp(2.2rem, 3.3vw, 3.1rem); line-height: 1; letter-spacing: -0.035em; color: var(--blue); font-feature-settings: "kern" 1, "tnum" 1; }
.plan .price .per { color: var(--ink-2); font-size: var(--s-small); }
.plan ul { margin: 0 0 24px; padding-left: 1.1em; line-height: 1.55; color: var(--ink); flex: 1; }
.plan li { margin: .35em 0; }
.plan li::marker { color: var(--blue); }
.plan .btn { align-self: flex-start; }
.pricing-body { max-width: 46rem; }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .plan, .plan + .plan { padding: 24px 0; border-left: 0; border-top: 1px solid var(--grey-2); }
  .plan:first-child { border-top: 0; }
}