/* Pricing: Free, Pro and Pro Family side by side, folded corners, and the
   plain-language notes on allowances, currency and trials underneath. */
.pricing { background: var(--cream-2); }
.plans { display: grid; gap: 16px; margin-top: 40px; }
.plan {
  --fold-bg: var(--cream-2);
  display: flex; flex-direction: column; padding: 28px 24px 24px;
  border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card);
}
.plan--pro { box-shadow: 0 0 0 2px var(--teal), var(--shadow-raised); }
.plan__name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.plan__price { margin-top: 10px; color: var(--ink-2); font-size: 1rem; }
.plan__amount { color: var(--ink); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; }
.plan__alt { color: var(--ink-2); font-size: 0.9375rem; }
.plan__list { list-style: none; display: grid; gap: 10px; margin: 20px 0 24px; }
.plan__list li { position: relative; padding-left: 26px; font-size: 0.9375rem; }
.plan__list li::before {
  content: ""; position: absolute; left: 2px; top: 0.35em; width: 14px; height: 8px;
  border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg);
}
.plan__cta { margin-top: auto; border: 1.5px solid var(--line-2); }
.plan__cta.btn--primary { border-color: var(--teal); }

.pricing__notes { display: grid; gap: 8px; max-width: 760px; margin-top: 28px; color: var(--ink-2); font-size: 0.9375rem; }

@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }