/* Pricing shares the approved Deals and Daily background. */
.pricing-preview .pricing-backdrop {
  display: flow-root;
  background:
    radial-gradient(ellipse at 8% 12%, #f9e2cd70, transparent 52%),
    radial-gradient(ellipse at 94% 30%, #ded6fa80, transparent 58%);
}

.pricing-preview .price-card .recommended {
  left: 50%;
  right: auto;
  top: -15px;
  transform: translateX(-50%);
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.pricing-preview .pricing-toggle .tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pricing-preview .yearly-saving { display: inline-block; padding: 3px 8px; border: 1px solid #98d985; border-radius: 100px; background: #b7eaa7; color: #171824; font-size: 11px; font-weight: 750; line-height: 1.3; }
.pricing-preview .plan-saving { margin-top: 6px; color: var(--green); font-size: 12px; font-weight: 650; }

body.pricing-preview:has(#preview-dark-mode:checked) .pricing-backdrop {
  background:
    radial-gradient(ellipse at 8% 12%, #a9764326, transparent 52%),
    radial-gradient(ellipse at 94% 30%, #9670da2b, transparent 58%);
}

body.pricing-preview:has(#preview-dark-mode:checked) .ranking-explainer { background: #292338; border-color: #44375c; }
body.pricing-preview:has(#preview-dark-mode:checked) .mini-rank { background: #211e2b; border-color: var(--line); }
body.pricing-preview:has(#preview-dark-mode:checked) .mini-rank.highlight { border-color: var(--purple); }
body.pricing-preview:has(#preview-dark-mode:checked) .plan-icon { background: #342948; }
body.pricing-preview:has(#preview-dark-mode:checked) .pricing-toggle .tabs { background: #211e2b; border-color: var(--line); }
body.pricing-preview:has(#preview-dark-mode:checked) .pricing-toggle .tabs a { color: var(--ink); }
body.pricing-preview:has(#preview-dark-mode:checked) .pricing-toggle .tabs a.active,
body.pricing-preview:has(#preview-dark-mode:checked) .recommended { background: #6552ef; color: #fff; }
body.pricing-preview:has(#preview-dark-mode:checked) .price-card.featured { border-color: var(--purple); }
body.pricing-preview:has(#preview-dark-mode:checked) .plan-features li,
body.pricing-preview:has(#preview-dark-mode:checked) .pricing-terms { color: var(--muted); }

@media (max-width: 650px) {
  .pricing-preview .pricing-toggle .tabs { gap: 3px; }
  .pricing-preview .pricing-toggle .tabs a { padding: 10px; gap: 6px; }
  .pricing-preview .yearly-saving { padding: 3px 6px; font-size: 10px; }
}

@media (max-width: 380px) {
  .pricing-preview .pricing-toggle .tabs a { padding-inline: 7px; }
}