/* Pricing-page plan identity and current-plan comparison states. */
.pricing-page .price-card[data-plan-card]:not([data-plan-card="free"]) {
  --pricing-plan-accent: #64748b;
  --pricing-plan-accent-2: #94a3b8;
  --pricing-plan-strong: #334155;
  --pricing-plan-soft: rgba(100, 116, 139, 0.1);
  --pricing-plan-border: rgba(100, 116, 139, 0.28);
  --pricing-plan-shadow: rgba(51, 65, 85, 0.12);
  isolation: isolate;
  overflow: hidden;
  border-color: var(--pricing-plan-border);
  background:
    radial-gradient(circle at 92% 8%, var(--pricing-plan-soft), transparent 32%),
    #ffffff;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.pricing-page .price-card[data-plan-card="personal"] {
  --pricing-plan-accent: #2563eb;
  --pricing-plan-accent-2: #7c3aed;
  --pricing-plan-strong: #3730a3;
  --pricing-plan-soft: rgba(79, 70, 229, 0.12);
  --pricing-plan-border: rgba(99, 102, 241, 0.34);
  --pricing-plan-shadow: rgba(67, 56, 202, 0.15);
}

.pricing-page .price-card[data-plan-card="firm"] {
  --pricing-plan-accent: #0f766e;
  --pricing-plan-accent-2: #4338ca;
  --pricing-plan-strong: #134e4a;
  --pricing-plan-soft: rgba(13, 148, 136, 0.11);
  --pricing-plan-border: rgba(13, 148, 136, 0.34);
  --pricing-plan-shadow: rgba(15, 118, 110, 0.14);
}

.pricing-page .price-card[data-plan-card="team"] {
  --pricing-plan-accent: #0891b2;
  --pricing-plan-accent-2: #1e3a8a;
  --pricing-plan-strong: #0f3460;
  --pricing-plan-soft: rgba(8, 145, 178, 0.11);
  --pricing-plan-border: rgba(14, 116, 144, 0.34);
  --pricing-plan-shadow: rgba(8, 47, 73, 0.15);
  background:
    linear-gradient(rgba(8, 145, 178, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 92% 8%, var(--pricing-plan-soft), transparent 32%),
    #ffffff;
  background-size: 30px 30px, 30px 30px, auto, auto;
}

.pricing-page .price-card[data-plan-card="plus"] {
  --pricing-plan-accent: #5b21b6;
  --pricing-plan-accent-2: #d4a72c;
  --pricing-plan-strong: #312e81;
  --pricing-plan-soft: rgba(126, 34, 206, 0.12);
  --pricing-plan-border: rgba(126, 34, 206, 0.36);
  --pricing-plan-shadow: rgba(76, 29, 149, 0.17);
  background:
    radial-gradient(circle at 86% 17%, rgba(212, 167, 44, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 94% 29%, rgba(91, 33, 182, 0.13) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 8%, var(--pricing-plan-soft), transparent 32%),
    #ffffff;
}

.pricing-page .price-card.current-plan-card:not([data-plan-card="free"]) {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--pricing-plan-accent), var(--pricing-plan-accent-2)) border-box;
  box-shadow: 0 24px 64px var(--pricing-plan-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pricing-page .price-card:not([data-plan-card="free"]) .current-plan-marker {
  border: 1px solid color-mix(in srgb, var(--pricing-plan-accent) 34%, transparent);
  color: var(--pricing-plan-strong);
  background: color-mix(in srgb, var(--pricing-plan-soft) 76%, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.pricing-page .price-card:not([data-plan-card="free"]) .current-plan-marker::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--pricing-plan-accent), var(--pricing-plan-accent-2));
  font-size: 11px;
}

.pricing-plan-upgrade-marker {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--pricing-plan-accent) 34%, transparent);
  border-radius: 999px;
  color: var(--pricing-plan-strong);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 18px var(--pricing-plan-shadow);
  font-size: 11px;
  font-weight: 900;
}

.pricing-plan-upgrade-marker[hidden] {
  display: none !important;
}

.pricing-page .price-card.is-plan-upgrade {
  border-color: color-mix(in srgb, var(--pricing-plan-accent) 58%, #e2e8f0);
  box-shadow: 0 14px 36px var(--pricing-plan-shadow);
}

.pricing-page .price-card.is-plan-upgrade .btn-primary,
.pricing-page .price-card.is-plan-upgrade .btn-secondary {
  box-shadow: 0 8px 20px var(--pricing-plan-shadow);
}

.pricing-page .price-card.is-plan-lower {
  opacity: 0.82;
}

.pricing-page .price-card.is-plan-lower:hover {
  opacity: 0.96;
}

.pricing-nav-plan-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pricing-nav-plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 5px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #334155;
  background: #ffffff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .pricing-page .price-card.is-plan-upgrade:hover,
  .pricing-page .price-card.current-plan-card:not([data-plan-card="free"]):hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 66px var(--pricing-plan-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .price-card[data-plan-card]:not([data-plan-card="free"]) {
    transition: none;
  }
}