/*
 * jz-pricing — styles for the shared pricing block (see jz-pricing.js).
 *
 * Every colour, radius and weight is a custom property with a fallback, so a page maps its
 * own brand onto the block in one rule, e.g.
 *   [data-jz-pricing] { --jz-accent: var(--brand); --jz-accent-bg: var(--grad); --jz-surface: var(--elev); }
 * Tokens: --jz-accent (text/icons), --jz-accent-bg (filled controls; may be a gradient),
 * --jz-accent-border (lead card outline), --jz-on-accent, --jz-text, --jz-ink (headings and
 * prices), --jz-muted, --jz-surface (cards), --jz-soft (tier track), --jz-border, --jz-radius
 * (buttons, 5px), --jz-card-radius, --jz-price-weight, --jz-save.
 */
.jz-pricing {
  --_accent: var(--jz-accent, #4f46e5);
  --_accent-bg: var(--jz-accent-bg, var(--_accent));
  --_accent-border: var(--jz-accent-border, var(--_accent));
  --_on: var(--jz-on-accent, #fff);
  --_text: var(--jz-text, #1c1c22);
  --_ink: var(--jz-ink, var(--_text));
  --_muted: var(--jz-muted, #5d5d6b);
  --_surface: var(--jz-surface, #fff);
  --_soft: var(--jz-soft, rgba(120, 120, 140, .08));
  --_border: var(--jz-border, rgba(15, 15, 25, .1));
  --_r: var(--jz-radius, 5px);
  --_card: var(--jz-card-radius, 16px);
  --_save: var(--jz-save, #16a34a);
  font: inherit;
  color: var(--_text);
  text-align: center;
}
.jz-pricing *, .jz-pricing *::before, .jz-pricing *::after { box-sizing: border-box; }

/* Billing period */
.jz-pricing .jz-periods { display: inline-flex; max-width: 100%; padding: 4px; margin: 30px 0 34px; border-radius: 8px; background: var(--_surface); border: 1px solid var(--_border); }
.jz-pricing .jz-period { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; margin: 0; border: 0; border-radius: var(--_r); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--_muted); cursor: pointer; white-space: nowrap; }
.jz-pricing .jz-period.is-on { background: var(--_accent-bg); color: var(--_on); }
.jz-pricing .jz-period:disabled { opacity: .4; cursor: default; }
.jz-pricing .jz-save { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--_save); }
.jz-pricing .jz-period.is-on .jz-save { color: var(--_on); opacity: .85; }

/* Plans */
.jz-pricing .jz-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px)); gap: 20px; justify-content: center; text-align: left; margin: 0; }
.jz-pricing[data-n="1"] .jz-plans { grid-template-columns: minmax(0, 420px); }
.jz-pricing .jz-periods + .jz-plans { margin-top: 0; }
.jz-pricing > .jz-plans:first-child { margin-top: 34px; }
.jz-pricing .jz-plan { display: flex; flex-direction: column; min-width: 0; padding: 30px; background: var(--_surface); border: 1px solid var(--_border); border-radius: var(--_card); }
.jz-pricing .jz-plan.is-lead { border: 2px solid var(--_accent-border); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--_accent-border) 38%, transparent); }
.jz-pricing .jz-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--_muted); }
.jz-pricing .jz-plan.is-lead .jz-name { color: var(--_accent); }
.jz-pricing .jz-name svg { flex-shrink: 0; }
.jz-pricing .jz-badge { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--_accent-bg); color: var(--_on); font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* Licence tiers */
.jz-pricing .jz-tiers { display: flex; gap: 4px; padding: 3px; margin-top: 14px; border-radius: 8px; background: var(--_soft); border: 1px solid var(--_border); }
.jz-pricing .jz-tiers button { flex: 1; min-width: 0; height: 32px; padding: 0 6px; margin: 0; border: 0; border-radius: var(--_r); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--_muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jz-pricing .jz-tiers button.is-on { background: var(--_surface); color: var(--_accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }

/* Price */
.jz-pricing .jz-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; min-height: 64px; margin: 10px 0 2px; font-size: 48px; font-weight: var(--jz-price-weight, 800); line-height: 1.3; letter-spacing: -1.5px; color: var(--_ink); }
.jz-pricing .jz-price-text { font-size: 30px; letter-spacing: -.6px; }
.jz-pricing .jz-per { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--_muted); }
.jz-pricing .jz-trial { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--_accent); }

/* Features */
.jz-pricing .jz-features { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; margin: 22px 0 28px; padding: 0; }
.jz-pricing .jz-features li { display: flex; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; }
.jz-pricing .jz-features svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--_accent); }
.jz-pricing .jz-features .is-out { color: var(--_muted); }
.jz-pricing .jz-features .is-out svg { color: var(--_muted); opacity: .7; }
.jz-pricing .jz-features strong { font-weight: 700; color: var(--_ink); }
.jz-pricing .jz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jz-pricing .jz-plan > .jz-price + .jz-btn, .jz-pricing .jz-plan > .jz-trial + .jz-btn { margin-top: 28px; }

/* Button */
.jz-pricing .jz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: auto; padding: 0 20px; border: 1px solid transparent; border-radius: var(--_r); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s, background .15s; }
.jz-pricing .jz-btn:hover { transform: translateY(-1px); }
.jz-pricing .jz-btn-primary { background: var(--_accent-bg); color: var(--_on); box-shadow: 0 8px 24px color-mix(in srgb, var(--_accent-border) 28%, transparent); }
.jz-pricing .jz-btn-primary:hover { filter: brightness(1.08); }
.jz-pricing .jz-btn-ghost { background: var(--_surface); color: var(--_text); border-color: var(--_border); }
.jz-pricing .jz-btn-ghost:hover { background: var(--_soft); }
.jz-pricing button:focus-visible, .jz-pricing .jz-btn:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .jz-pricing .jz-plans, .jz-pricing[data-n="1"] .jz-plans { grid-template-columns: minmax(0, 1fr); }
  .jz-pricing .jz-plan { padding: 24px; }
  .jz-pricing .jz-period { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .jz-pricing .jz-btn { transition: none; } .jz-pricing .jz-btn:hover { transform: none; } }