/* Plan card — Figma: Tasarım sistemi › Plan card (239:6092), Plan feature row (239:5631)
   Mobile 353 wide (34 px number) · desktop (52 px number). GROWTH: featured, blue frame. */

.plan-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-divider);
  border-radius: var(--radius-xl);
  background: var(--color-surface-page);
  box-shadow: 0 8px 24px rgba(31, 87, 194, 0.06);
}
.plan-card--featured {
  border: 1.5px solid var(--color-brand-primary);
  box-shadow: 0 24px 48px -12px rgba(30, 86, 195, 0.14);
}

.plan-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-24) var(--space-20);
  background: var(--color-brand-tint);
}
.plan-card__name {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.plan-card__users {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  white-space: nowrap;
}
.plan-card__count {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.plan-card__unit { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
.plan-card__text { font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }

.plan-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-20) var(--space-20) var(--space-24);
}
.plan-card__lead { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--color-text-secondary); }
.plan-card__features { display: flex; flex-direction: column; gap: var(--space-10); }
.plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.002em;
  color: var(--color-text-primary);
}
.plan-card__check { font-weight: 600; line-height: 1.3; color: var(--color-brand-primary); padding-top: 2px; }
.plan-card__soon { white-space: nowrap; }

/* Reveal: feature rows tick in one after another */
.js [data-reveal] .plan-card__feature {
  opacity: 0;
  transform: translate3d(-6px, 0, 0);
  transition: opacity 400ms var(--ease-out-soft), transform 400ms var(--ease-out-soft);
  transition-delay: calc(350ms + var(--row, 0) * 60ms);
}
.js [data-reveal].is-revealed .plan-card__feature { opacity: 1; transform: none; }

@media (min-width: 1024px) {
  .plan-card__top { gap: var(--space-12); padding: var(--space-28) var(--space-32); }
  .plan-card__name { font-size: 15px; letter-spacing: -0.002em; }
  .plan-card__count { font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }
  .plan-card__unit { font-size: 15px; line-height: 1.55; letter-spacing: -0.002em; }
  .plan-card__text { line-height: 1.55; letter-spacing: -0.002em; min-height: calc(2 * 1.55em); }
  .plan-card__body { gap: var(--space-12); padding: var(--space-24) var(--space-32) var(--space-32); }
  .plan-card__lead { line-height: 1.3; }
  .plan-card__features { gap: var(--space-12); }
  .plan-card--featured { border-width: 2px; }
}