/* Shared by the three package pages: Marketing Pilot, Growth Partner, Scale Partner.
   Everything structural still comes from compare.css. This is the layer those three add on top of
   it, and it lives in one file for the reason the Pilot page already gave for using compare.css:
   three copies of the same block drift, and the price is the one thing on these pages that must
   never render differently from one page to the next. */
.price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.price-big{font-size:clamp(2.2rem,6vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.price-term{color:var(--muted);font-weight:700}
.credit{border-radius:14px;padding:15px 18px;margin:18px 0 24px;max-width:60ch;
  background:var(--sl-forest-tint);border:1px solid rgba(36,51,43,.22);line-height:1.55}
.credit b{color:var(--text)}
.buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.buy .btn-primary{padding:15px 30px;font-size:1.02rem}
.buy-note{color:var(--dim);font-size:1rem;margin:0 0 8px}
.inc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 8px}
@media(max-width:660px){.inc{grid-template-columns:1fr;gap:14px}}
.inc-col{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:22px 22px 20px}
.inc-col h3{margin:0 0 12px;font-size:1.02rem}
.inc-col ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:9px;color:var(--muted)}
.inc-col li b{color:var(--text);font-weight:700}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:16px;margin:0 0 8px}
.step{counter-increment:s;position:relative;padding-left:44px}
.step::before{content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;
  background:rgba(106,92,255,.15);color:#a79aff}
.step b{display:block;margin-bottom:3px}
.step p{margin:0;color:var(--muted)}