/* Per-language type system for /pricing (2026-09-17), mirroring (marketing).
 * Deliberately a plain CSS file, not a `@theme` block: pricing shares
 * globals.css with the dashboard (`page.tsx` imports it), and touching that
 * file's `--font-sans` would change dashboard typography too — out of scope
 * here. These rules only ever apply inside `.pricing-fonts`.
 *
 * Fallbacks reference the SAME `--font-rubik-hebrew` / `--font-heebo-hebrew`
 * / `--font-inter` variables the dashboard and (marketing) already use — each
 * route's own `localFont()` call defines them scoped to its own wrapper, so
 * there's no collision, just a shared naming convention.
 */
.pricing-fonts {
  font-family: var(--font-inter, ui-sans-serif), var(--font-heebo-hebrew, ui-sans-serif),
    system-ui, sans-serif;
}

.pricing-fonts h1,
.pricing-fonts h2,
.pricing-fonts h3,
.pricing-fonts h4,
.pricing-fonts h5,
.pricing-fonts h6 {
  font-family: var(--font-inter, ui-sans-serif), var(--font-rubik-hebrew, ui-sans-serif),
    system-ui, sans-serif;
}

html[lang='he'] .pricing-fonts {
  font-family: var(--font-heebo-hebrew, ui-sans-serif), var(--font-heebo-latin, ui-sans-serif),
    system-ui, sans-serif;
}

html[lang='he'] .pricing-fonts h1,
html[lang='he'] .pricing-fonts h2,
html[lang='he'] .pricing-fonts h3,
html[lang='he'] .pricing-fonts h4,
html[lang='he'] .pricing-fonts h5,
html[lang='he'] .pricing-fonts h6 {
  font-family: var(--font-rubik-hebrew, ui-sans-serif), var(--font-rubik-latin, ui-sans-serif),
    system-ui, sans-serif;
}

/* Birzia display face on h1/h2, Hebrew only (English headings keep their face), existing Hebrew
 * heading stack behind it as the per-glyph fallback. Same scheme as (marketing). */
html[lang='he'] .pricing-fonts h1,
html[lang='he'] .pricing-fonts h2 {
  font-family: 'Birzia', var(--font-rubik-hebrew, ui-sans-serif),
    var(--font-rubik-latin, ui-sans-serif), system-ui, sans-serif;
}

/* ── Plan cards: drop in from above ────────────────────────────────────────
 * Each card falls a short way into place, with a small bounce, one after another
 * (`--i`, set on the card, staggers them). The end state of the keyframes is the
 * resting layout, so the page reads fully without the motion. */
@keyframes plan-drop {
  0% { transform: translateY(-56px); opacity: 0; }
  55% { transform: translateY(6px); opacity: 1; }
  78% { transform: translateY(-3px); }
  100% { transform: translateY(0); opacity: 1; }
}

.pricing-fonts .plan-card {
  animation: plan-drop 0.8s cubic-bezier(0.34, 1.1, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

/* The one lit card: a thin brand-gradient rule on its top edge. */
.pricing-fonts .plan-pro-rule {
  position: absolute;
  top: -1.5px;
  inset-inline: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(100deg, #f65bd0 0%, #a855f7 55%, #22d3ee 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-fonts .plan-card {
    animation: none;
  }
}