/* One package-card presentation for comparison and event checkout. */
:is(#createview, .pricing-packages) .plans { gap: 16px; }
:is(#createview, .pricing-packages) .plan { padding: 22px 18px 18px; border: 1px solid #e1dcd7; border-radius: 14px; background: #fff; box-shadow: none; }
:is(#createview, .pricing-packages) .plan:is(.sel, .plan-featured) { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 7%, transparent); }
:is(#createview, .pricing-packages) .plan-pop { background: var(--brand-soft); color: var(--brand-primary); font-size: 9px; }
:is(#createview, .pricing-packages) .plan-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap; }
:is(#createview, .pricing-packages) .plan-hmid { display: block; flex: 1; min-width: 0; padding-top: 3px; }
:is(#createview, .pricing-packages) .plan-hend { display: block; flex: none; margin: 0; text-align: right; }
:is(#createview, .pricing-packages) .plan-name { font-size: 16px; font-weight: var(--fw-subheading); letter-spacing: -.35px; line-height: var(--lh-subheading); }
:is(#createview, .pricing-packages) .plan-price { display: block; margin: 0; color: var(--ink); font-size: 27px; line-height: 1.15; font-weight: 700; letter-spacing: -.9px; font-variant-numeric: tabular-nums; }
:is(#createview, .pricing-packages) .plan-billing { display: block; margin: 3px 0 0; font-size: 10.5px; color: #858d9b; }
:is(#createview, .pricing-packages) .plan-tag { min-height: 60px; margin: 17px 0 10px; padding: 0; border: 0; font-size: 13px; line-height: var(--lh-copy); color: var(--text-copy); }
:is(#createview, .pricing-packages) .plan-list { display: block; margin: 0 0 17px; }
:is(#createview, .pricing-packages) .plan-list li { padding: 5px 0 5px 23px; font-size: 13px; line-height: var(--lh-help); color: var(--text-copy); }
:is(#createview, .pricing-packages) .plan-list li::before { color: #149767; font-weight: 600; }
:is(#createview, .pricing-packages) .plan-list strong { color: var(--ink); font-weight: 600; }
:is(#createview, .pricing-packages) .plan-list small { font-size: 11.5px; color: #858d9b; margin-top: 1px; }
:is(#createview, .pricing-packages) .plan-list .plan-preview::before { color: #858d9b; }
:is(#createview, .pricing-packages) .plan-btn { min-height: 44px; border: 1px solid #d8d3cd; border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
:is(#createview, .pricing-packages) .plan:is(.sel, .plan-featured) .plan-btn { background: var(--brand-fill); border-color: var(--brand-primary); color: #fff; }
:is(#createview, .pricing-packages) .plan-btn:hover { background: var(--brand-tint); }
:is(#createview, .pricing-packages) .plan:is(.sel, .plan-featured) .plan-btn:hover { background: var(--brand-fill-hover); }
@media (max-width: 1000px) and (min-width: 901px) {
  :is(#createview, .pricing-packages) .plan { padding-inline: 14px; }
  :is(#createview, .pricing-packages) .plan-name { font-size: 15px; font-weight: var(--fw-subheading); line-height: var(--lh-subheading); }
  :is(#createview, .pricing-packages) .plan-price { font-size: 25px; }}
@media (max-width: 900px) {
  :is(#createview, .pricing-packages) .plans { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  :is(#createview, .pricing-packages) .plan-tag { min-height: 0; color: var(--text-copy); line-height: var(--lh-copy); }}
@media (max-width: 640px) {
  :is(#createview, .pricing-packages) .plan { padding: 20px 18px 18px; }
  :is(#createview, .pricing-packages) .plan-tag, :is(#createview, .pricing-packages) .plan-list li { font-size: 13px; }}
@media (max-width: 380px) {
  :is(#createview, .pricing-packages) .plan { padding: 18px 14px 16px; }
  :is(#createview, .pricing-packages) .plan-name { font-size: 15px; font-weight: var(--fw-subheading); line-height: var(--lh-subheading); }
  :is(#createview, .pricing-packages) .plan-price { font-size: 24px; }
  :is(#createview, .pricing-packages) .plan-head { gap: 6px; }}