/* Pricing Ladder widget.
   Light card. Three tier cards stacked vertically (Pilot / Program /
   Enterprise). Each tier card: tier name + "for whom" blurb on top,
   price slot on the bottom that always reads "Scoped to your
   program." A 6s scan (2s per tier) lights the active tier's
   border + tier-name chip while the others sit at a quiet resting
   state. Same calm-row vocabulary as twg-triad + integration-matrix. */

.widget-pricing-ladder {
  --wpl-teal: var(--brand-teal);
  --wpl-blue: var(--brand-blue);
  --wpl-surface: var(--color-card, #fff);
  --wpl-fg: var(--color-foreground);
  --wpl-muted: var(--color-muted-foreground);
  --wpl-line: var(--color-border);
  --wpl-panel: color-mix(in srgb, var(--wpl-fg) 3%, var(--wpl-surface));
  --wpl-cycle: 6s;

  min-width: 0;
  width: 100%;
}

.widget-pricing-ladder__card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.875rem 0.875rem 1rem;
  background: var(--wpl-surface);
  border: 1px solid var(--wpl-line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgb(16 17 20 / 4%),
    0 10px 28px -14px rgb(16 17 20 / 14%),
    0 22px 48px -24px rgb(16 17 20 / 10%);
  color: var(--wpl-fg);
}

/* --- Head row ----------------------------------------------------- */

.widget-pricing-ladder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.125rem 0.25rem;
}

.widget-pricing-ladder__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wpl-fg);
}

.widget-pricing-ladder__tag-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--wpl-teal);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--wpl-teal) 35%, var(--wpl-surface)),
    0 0 10px color-mix(in srgb, var(--wpl-teal) 45%, transparent);
  animation: wpl-tag-breathe 2.6s ease-in-out infinite;
}

.widget-pricing-ladder__status {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wpl-muted);
}

/* --- Tier list ---------------------------------------------------- */

.widget-pricing-ladder__tiers {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.widget-pricing-ladder__tier {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 1rem 0.875rem;
  background: var(--wpl-panel);
  border: 1px solid color-mix(in srgb, var(--wpl-fg) 9%, transparent);
  border-radius: var(--radius-md);
  min-width: 0;
  opacity: 0.65;
  animation: wpl-tier-active var(--wpl-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wpl-cycle));
}

@keyframes wpl-tier-active {
  /* 33.33% per tier. 3% fade-in, 25% hold, 5% fade-out. */
  0%, 3% {
    opacity: 0.65;
    background: var(--wpl-panel);
    border-color: color-mix(in srgb, var(--wpl-fg) 9%, transparent);
  }
  6%, 28% {
    opacity: 1;
    background: color-mix(in srgb, var(--wpl-teal) 4%, var(--wpl-surface));
    border-color: color-mix(in srgb, var(--wpl-teal) 22%, transparent);
  }
  33.33%, 100% {
    opacity: 0.65;
    background: var(--wpl-panel);
    border-color: color-mix(in srgb, var(--wpl-fg) 9%, transparent);
  }
}

/* --- Tier head ---------------------------------------------------- */

.widget-pricing-ladder__tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.widget-pricing-ladder__tier-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.01em;
  color: var(--wpl-fg);
  /* Tier name also scales in color with the scan so the active
     tier pops. Driven off the same --i stagger. */
  animation: wpl-tier-name-active var(--wpl-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wpl-cycle));
}

@keyframes wpl-tier-name-active {
  0%, 3%       { color: var(--wpl-fg); }
  6%, 28%      { color: color-mix(in srgb, var(--wpl-teal) 75%, var(--wpl-fg)); }
  33.33%, 100% { color: var(--wpl-fg); }
}

.widget-pricing-ladder__tier-for {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--wpl-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* --- Price slot (always "Scoped to your program") ---------------- */

.widget-pricing-ladder__price-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--wpl-teal) 3%, var(--wpl-surface));
  border: 1px solid color-mix(in srgb, var(--wpl-teal) 14%, transparent);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.widget-pricing-ladder__price-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wpl-muted);
  white-space: nowrap;
}

.widget-pricing-ladder__price-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
  color: var(--wpl-teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* --- Shared tag-dot breathe -------------------------------------- */

@keyframes wpl-tag-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--wpl-teal) 35%, var(--wpl-surface)),
      0 0 10px color-mix(in srgb, var(--wpl-teal) 45%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--wpl-teal) 22%, var(--wpl-surface)),
      0 0 16px color-mix(in srgb, var(--wpl-teal) 60%, transparent);
  }
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 520px) {
  .widget-pricing-ladder__tier-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1875rem;
  }
  .widget-pricing-ladder__tier-for {
    text-align: left;
  }
}

/* --- Reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .widget-pricing-ladder__tag-dot,
  .widget-pricing-ladder__tier,
  .widget-pricing-ladder__tier-name {
    animation: none;
  }
  .widget-pricing-ladder__tier { opacity: 1; }
}