/* The plans on sale (plans.js), between the feature grid and the closing call to action. Same
   cards and bars as the feature grid (home.css); a paid plan is the lit one. */
.plans { margin-top: 72px; }
.plans__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.plan { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 22px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(154, 163, 196, .18); }
.plan--paid { background: linear-gradient(160deg, rgba(47, 75, 255, .24), rgba(255, 255, 255, .03)); border-color: rgba(140, 155, 255, .45); }
.plan__name { margin: 0; font-size: 1.15rem; font-weight: 700; }
.plan__price { margin: 6px 0 0; color: #B4BBD6; font-size: 1rem; }
.plan__price b { font: 800 2.2rem/1.1 var(--sw-font-display); color: #F4F6FB; letter-spacing: -.02em; }
.plan__alt { margin: 0; color: #9AA3C4; font-size: .92rem; }
.plan__trial { margin: 4px 0 0; align-self: flex-start; font-size: .82rem; font-weight: 700; color: #FF6A52;
  background: rgba(255, 106, 82, .12); border-radius: 999px; padding: 4px 10px; }
.plan__has { list-style: none; margin: 14px 0 22px; padding: 0; flex: 1; display: grid; gap: 8px; align-content: start;
  color: #C9CFE6; font-size: .96rem; line-height: 1.45; }
.plan__has li { position: relative; padding-inline-start: 22px; }
.plan__has li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 12px; height: 4px; border-radius: 2px; background: #8C9BFF; }
.plan--paid .plan__has li::before { background: #FF6A52; }
.plan .btn { align-self: flex-start; }