/* ============================================================
 * Vilkax · pricing-stack.css
 * ============================================================
 *
 * The 3-tier subscription card stack. Three modes:
 *
 *   .vlx-stack[data-mode="hero"]    - full-width, depth-stacked,
 *                                     parallax-on-mouse-move.
 *                                     Used on /pricing/.
 *
 *   .vlx-stack[data-mode="grid"]    - flat 3-column grid with
 *                                     subtle hover-lift.
 *                                     Used on /app/settings/.
 *
 *   .vlx-stack[data-mode="compact"] - single-row mini cards
 *                                     for cross-sell prompts.
 *                                     Used on /app/lab/.
 *
 * Brand tokens: reads --brand-primary, --brand-primary-bright,
 * --text-strong, --text-muted, --text-dim, --border-subtle from
 * /style.css. Falls back to the dark-Vilkax palette if a token
 * is missing.
 */

/* ── Container ───────────────────────────────────────────── */
.vlx-stack {
  --tier-free-color:  #94a3b8;
  --tier-pro-color:   var(--brand-primary-bright, #B14CFF);
  --tier-ent-color:   #10b981;

  position: relative;
  margin: 0 auto;
  max-width: 1180px;
  padding: 16px;
  /* Pass-144 - flex column so the headline + billing-cycle
     toggle + cards stack vertically with the toggle centered. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vlx-stack-empty {
  text-align: center;
  color: var(--text-dim, #64748b);
  font-style: italic;
  padding: 40px;
}
/* Pass-151 - subtle "showing fallback pricing" badge.  Only
   appears when the API is unreachable; tiny + low-contrast
   so it doesn't compete with the cards but is visible to a
   tester / operator who's checking why the live data didn't
   land. */
.vlx-stack-note {
  text-align: center;
  margin: 18px auto 0;
  padding: 6px 14px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(253, 224, 71, 0.85);
  background: rgba(253, 224, 71, 0.06);
  border: 1px solid rgba(253, 224, 71, 0.20);
  border-radius: 999px;
  width: fit-content;
  max-width: 520px;
}

.vlx-stack-headline {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}
.vlx-stack-headline h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-strong, #f8fafc);
}
.vlx-stack-headline p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted, #94a3b8);
}

/* ============================================================
 * Pass-144 - Billing-cycle toggle (Monthly / Annual −20%)
 *
 * Standard SaaS pattern: pill-shaped two-button group sitting
 * above the card stack.  Active button gets a brand-blue
 * background; the annual button shows a tiny discount badge.
 * ============================================================ */
.vlx-cycle-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 22px;
  padding: 4px;
  background: rgba(11, 20, 38, 0.55);
  border: 1px solid rgba(192, 123, 255, 0.22);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(192, 123, 255, 0.05),
    0 6px 18px -10px rgba(139, 47, 214, 0.40);
}

/* ── Audience toggle (Personal / Business) ─────────────────
 * Sits above the billing-cycle toggle. Same glassy pill shape so
 * the page reads as one calm set of controls, not a marketing
 * funnel. Two tabs, no extra ornaments.
 * ─────────────────────────────────────────────────────────── */
.vlx-audience-toggle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 auto 14px;
  padding: 4px;
  background: rgba(11, 20, 38, 0.55);
  border: 1px solid rgba(127, 207, 230, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.vlx-audience-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 9px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.62);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.vlx-audience-tab:hover { color: #cbd5e1; }
.vlx-audience-tab.is-active {
  color: #0b1426;
  background: linear-gradient(135deg, #7fcfe6, #4FA8E0);
  box-shadow: 0 4px 14px -4px rgba(127, 207, 230, 0.55);
}
.vlx-stack-headline + .vlx-cycle-toggle,
.vlx-cycle-toggle {
  /* Center the pill below the headline on hero mode. */
  align-self: center;
}
.vlx-cycle-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.62);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 200ms ease, color 200ms ease,
              box-shadow 200ms ease;
}
.vlx-cycle-tab:hover { color: #cbd5e1; }
.vlx-cycle-tab.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #8B2FD6, #B14CFF);
  box-shadow:
    0 4px 14px -4px rgba(139, 47, 214, 0.55),
    0 0 18px -4px rgba(177, 76, 255, 0.40);
}
.vlx-cycle-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(110, 231, 183, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.35);
}
.vlx-cycle-tab.is-active .vlx-cycle-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.30);
}

/* Add some breathing room between toggle and headline. */
.vlx-stack-headline { margin-bottom: 14px; }

/* ============================================================
 * MODE: hero  (used on /pricing/)
 *
 * Three cards stacked diagonally with depth. The middle one
 * (Pro / Wolf) is elevated forward + pulsed slightly. On hover
 * the cards spread; the hovered card pops to the front.
 * ============================================================ */
.vlx-stack[data-mode="hero"] .vlx-stack-cards {
  position: relative;
  width: 100%;
  display: grid;
  gap: 14px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
/* Audience-aware column count: 3 for personal (Pack / Wolf / Pack Guardian),
   3 for business (Starter / Pro / Enterprise). */
.vlx-stack[data-mode="hero"] .vlx-stack-cards[data-audience="personal"] {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
  margin: 0 auto;
}
.vlx-stack[data-mode="hero"] .vlx-stack-cards[data-audience="business"] {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 1080px) {
  .vlx-stack[data-mode="hero"] .vlx-stack-cards[data-audience="personal"] { grid-template-columns: repeat(2, 1fr); }
  .vlx-stack[data-mode="hero"] .vlx-stack-cards[data-audience="business"] { grid-template-columns: repeat(2, 1fr); }
}

.vlx-stack[data-mode="hero"] .vlx-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-style: preserve-3d;
  transition:
    transform 360ms cubic-bezier(0.25, 0.8, 0.3, 1),
    border-color 280ms ease,
    box-shadow 360ms ease,
    background 360ms ease;
  will-change: transform;
}

/* Initial offset to suggest depth - left card tilts back, right
 * card tilts forward, middle card stays neutral and elevated. */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="free"] {
  transform: rotateY(8deg) rotateX(2deg) translateZ(-22px);
}
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"] {
  transform: translateZ(36px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(177, 76, 255, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(177, 76, 255, 0.40);
  box-shadow:
    0 24px 64px rgba(139, 47, 214, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 2;
}
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="enterprise"] {
  transform: rotateY(-8deg) rotateX(2deg) translateZ(-22px);
}

/* Hover spreads the deck + lifts the hovered card. */
.vlx-stack[data-mode="hero"] .vlx-stack-cards:hover .vlx-card {
  transform: translateZ(-48px) rotateY(0deg) rotateX(0deg);
  opacity: 0.65;
  filter: saturate(0.85);
}
.vlx-stack[data-mode="hero"] .vlx-stack-cards:hover .vlx-card:hover {
  transform: translateZ(56px) translateY(-4px);
  opacity: 1;
  filter: saturate(1.05);
  z-index: 4;
}

/* "Recommended" ribbon on the Pro tier */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand-primary-bright, #B14CFF), var(--brand-primary, #8B2FD6));
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(139, 47, 214, 0.40);
  white-space: nowrap;
}

/* Tier-coloured halo above each card on hover */
.vlx-stack[data-mode="hero"] .vlx-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
  background: radial-gradient(
    60% 40% at 50% 0%,
    var(--vlx-tier-color, transparent), transparent 70%
  );
}
.vlx-stack[data-mode="hero"] .vlx-card:hover::after { opacity: 0.55; }

.vlx-stack[data-mode="hero"] .vlx-card[data-tier="free"]        { --vlx-tier-color: rgba(148, 163, 184, 0.50); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="basic"]       { --vlx-tier-color: rgba(56, 189, 248, 0.55); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]         { --vlx-tier-color: rgba(177, 76, 255, 0.65); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="family"]      { --vlx-tier-color: rgba(251, 146, 60, 0.60); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="biz_starter"] { --vlx-tier-color: rgba(148, 163, 184, 0.50); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="biz_pro"]     { --vlx-tier-color: rgba(167, 139, 250, 0.55); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="enterprise"]  { --vlx-tier-color: rgba(16, 185, 129, 0.55); }

/* ============================================================
 * MODE: grid  (used on /app/settings/)
 * Flat 3-column grid; same cards but no perspective tilt.
 * ============================================================ */
.vlx-stack[data-mode="grid"] .vlx-stack-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.vlx-stack[data-mode="grid"] .vlx-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.vlx-stack[data-mode="grid"] .vlx-card:hover {
  border-color: var(--brand-primary-bright, #B14CFF);
  transform: translateY(-2px);
}
.vlx-stack[data-mode="grid"] .vlx-card[data-current="true"] {
  border-color: var(--tier-ent-color);
  background: rgba(16, 185, 129, 0.06);
}

/* ============================================================
 * MODE: compact  (used on /app/lab/)
 * One-line mini cards as a cross-sell strip.
 * ============================================================ */
.vlx-stack[data-mode="compact"] .vlx-stack-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.vlx-stack[data-mode="compact"] .vlx-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vlx-stack[data-mode="compact"] .vlx-card-headline,
.vlx-stack[data-mode="compact"] .vlx-card-features { display: none; }
.vlx-stack[data-mode="compact"] .vlx-card-name {
  font-size: 11px;
}
.vlx-stack[data-mode="compact"] .vlx-card-price-num {
  font-size: 18px;
}

/* ============================================================
 * Card-internal styles (shared across modes)
 * ============================================================ */
.vlx-card-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-strong, #f8fafc);
}
.vlx-card[data-tier="free"]       .vlx-card-name { color: var(--tier-free-color); }
.vlx-card[data-tier="pro"]        .vlx-card-name { color: var(--tier-pro-color); }
.vlx-card[data-tier="enterprise"] .vlx-card-name { color: var(--tier-ent-color); }

/* "Most popular" pill on the recommended tier - fintech card-
 * stack convention.  Sits at the top of the recommended card,
 * brand-blue gradient, casts a subtle glow so the eye finds it
 * first when scanning. */
.vlx-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8B2FD6 0%, #B14CFF 100%);
  color: #fff;
  font-family: var(--font-brand, "Manrope", sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow:
    0 6px 18px -4px rgba(139, 47, 214, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  white-space: nowrap;
}
.vlx-card[data-recommended="true"] {
  /* Pass-145 - premium-tier treatment.  This is the card we
     want users to pick: brand-blue outline becomes a full neon
     ring, ambient outer glow lifts it off the row, and the
     "most popular" pill at the top gets a gentle gradient
     sweep.  Reads as "deluxe" without overwhelming neighbours. */
  outline: 1px solid rgba(192, 123, 255, 0.65);
  outline-offset: -1px;
  box-shadow:
    inset 0 0 0 1px rgba(192, 123, 255, 0.15),
    0 0 0 1px rgba(177, 76, 255, 0.30),
    0 20px 50px -18px rgba(139, 47, 214, 0.45),
    0 0 60px -10px rgba(177, 76, 255, 0.35);
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(139, 47, 214, 0.18) 0%, rgba(139, 47, 214, 0) 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(11, 20, 38, 0.95));
  position: relative;
}
.vlx-card[data-recommended="true"]::after {
  /* Slow ambient sweep so the neon ring reads as "alive". */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(192, 123, 255, 0)   0deg,
    rgba(192, 123, 255, 0.45) 30deg,
    rgba(192, 123, 255, 0)   90deg,
    rgba(192, 123, 255, 0)   360deg
  );
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  animation: vlx-card-sweep 6s linear infinite;
  opacity: 0.65;
}
@keyframes vlx-card-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vlx-card[data-recommended="true"]::after { animation: none; }
}

/* Make the badge sit a touch larger + brighter on the
   premium card. */
.vlx-card[data-recommended="true"] .vlx-card-badge {
  background: linear-gradient(135deg, #C07BFF, #8B2FD6);
  box-shadow: 0 8px 22px -6px rgba(139, 47, 214, 0.65),
              0 0 24px -4px rgba(192, 123, 255, 0.55);
  letter-spacing: 0.18em;
}

/* The price number on the premium card gets a faint
   brand-blue text-shadow → reads as "the deluxe price tag". */
.vlx-card[data-recommended="true"] .vlx-card-price-num {
  text-shadow: 0 0 22px rgba(177, 76, 255, 0.35);
}

/* The CTA on the premium card gets a stronger hover glow. */
.vlx-card[data-recommended="true"] .vlx-card-cta {
  background: linear-gradient(135deg, #B14CFF, #8B2FD6);
  box-shadow:
    0 6px 20px -6px rgba(139, 47, 214, 0.50),
    0 0 22px -6px rgba(192, 123, 255, 0.40);
}
.vlx-card[data-recommended="true"] .vlx-card-cta:hover {
  filter: brightness(1.12);
  box-shadow:
    0 10px 28px -6px rgba(139, 47, 214, 0.65),
    0 0 32px -4px rgba(192, 123, 255, 0.60);
}

.vlx-card-headline {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #94a3b8);
  min-height: 36px;
}

.vlx-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 8px;
}
.vlx-card-price-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-strong, #f8fafc);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vlx-card-price-cycle {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}
.vlx-card-price-yearly {
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--text-dim, #64748b);
  margin-top: 2px;
}
.vlx-card-price-local {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.78);
  margin-top: 4px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ── Seasonal offer badge ──────────────────────────────────
 * Calm, single-line, no urgency. Muted-gold pill with the
 * discount + a one-line headline. Stays visually subordinate
 * to the price (smaller font, lower contrast) so the page
 * keeps reading as a serious fintech product, not a sale.
 */
.vlx-card-seasonal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: rgba(252, 211, 77, 0.88);
  flex-wrap: wrap;
}
.vlx-card-seasonal-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(252, 211, 77, 0.12);
  border: 1px solid rgba(252, 211, 77, 0.35);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fde68a;
}
.vlx-card-seasonal-headline {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(226, 232, 240, 0.85);
}

/* Featured cards - one per audience.
 *   PERSONAL: Family is the household best-value. Warm amber/rose
 *             reads as "hearth/home" and separates it visually from
 *             Wolf's blue tech-glow on its left.
 *   BUSINESS: Business Pro is the sweet-spot for most teams. Soft
 *             violet - calm, premium, not the loud purple mask the
 *             earlier pass shipped.
 * No urgency language, no countdown. Each card gets the most-muted
 * version of its hue so the higher price doesn't visually shout. */

/* Family - warm hearth-amber. Different enough from Wolf (blue)
   and from Biz Pro (violet) that it never reads as "another
   purple card". */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="family"] {
  border-color: rgba(251, 146, 60, 0.32);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(251, 146, 60, 0.10), transparent 65%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 14px 38px -18px rgba(251, 146, 60, 0.45);
}
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="family"]::after {
  content: "For households";
  position: absolute;
  top: -10px; right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  color: #0b1426;
  box-shadow: 0 6px 18px -6px rgba(251, 146, 60, 0.55);
}

/* Business Pro - calm violet. Softer than the previous pass: lower
   opacity border + gentler shadow so the price doesn't compound
   the visual weight. */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="biz_pro"] {
  border-color: rgba(167, 139, 250, 0.30);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(167, 139, 250, 0.08), transparent 65%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 14px 36px -18px rgba(167, 139, 250, 0.42);
}
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="biz_pro"]::after {
  content: "Best for teams";
  position: absolute;
  top: -10px; right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  color: #0b1426;
  box-shadow: 0 6px 18px -6px rgba(167, 139, 250, 0.50);
}

.vlx-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
}
.vlx-card-features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
  align-items: start;
}
.vlx-card-features li::before {
  content: "✓";
  color: currentColor;
  font-weight: 800;
  font-size: 11px;
}
.vlx-card[data-tier="free"]       .vlx-card-features li::before { color: var(--tier-free-color); }
.vlx-card[data-tier="pro"]        .vlx-card-features li::before { color: var(--tier-pro-color); }
.vlx-card[data-tier="enterprise"] .vlx-card-features li::before { color: var(--tier-ent-color); }
.vlx-card-features li[data-absent="true"] { opacity: 0.45; }
.vlx-card-features li[data-absent="true"]::before { content: "·"; }

/* Family household-size selector — two segmented options (up to 4 / 10). */
.vlx-card-sizes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 12px;
}
.vlx-card-size {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text, #e2e8f0);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}
.vlx-card-size:hover { border-color: var(--brand-primary, #8B2FD6); }
.vlx-card-size.on {
  border-color: var(--brand-primary-bright, #B14CFF);
  background: rgba(177, 76, 255, 0.12);
}
.vlx-card-size-label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.vlx-card-size-price { font-size: 13px; font-weight: 800; color: var(--text-strong, #f8fafc); }

.vlx-card-cta {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-strong, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.10));
  padding: 11px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: filter 180ms ease, background 180ms ease, border-color 180ms ease;
}
.vlx-card-cta:hover { filter: brightness(1.08); }
.vlx-card[data-tier="pro"] .vlx-card-cta {
  background: linear-gradient(135deg, var(--brand-primary-bright, #B14CFF), var(--brand-primary, #8B2FD6));
  border: 0;
  color: #fff;
  box-shadow: 0 8px 24px rgba(139, 47, 214, 0.35);
}
.vlx-card[data-current="true"] .vlx-card-cta {
  background: rgba(16, 185, 129, 0.16);
  color: var(--tier-ent-color);
  border-color: rgba(16, 185, 129, 0.40);
  cursor: default;
  pointer-events: none;
}

/* ── Holographic shimmer on hover (hero mode only) ────────── */
.vlx-stack[data-mode="hero"] .vlx-card .vlx-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 320ms ease;
}
.vlx-stack[data-mode="hero"] .vlx-card:hover .vlx-shimmer { opacity: 1; }
.vlx-stack[data-mode="hero"] .vlx-card .vlx-shimmer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0.18) 52%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: vlxShimmer 2.4s ease-in-out infinite;
}
@keyframes vlxShimmer {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .vlx-stack[data-mode="hero"] .vlx-card .vlx-shimmer::before { animation: none; }
  .vlx-stack[data-mode="hero"] .vlx-card { transition: none; }
}

/* ── Pass-146 interactive parallax - mouse-driven tilt ────
 *
 * The pricing-stack.js mount writes `--vlx-mx` / `--vlx-my`
 * (range −0.5..0.5) onto the card stack on mousemove.  CSS
 * picks those vars up to tilt the deck on Y/X axes for an
 * "interactive moving" depth read - same trick Stripe + Linear
 * use on their pricing hero.  Pure CSS animation (zero JS layer
 * thrashing); reduced-motion users get the static composition.
 * --------------------------------------------------------------- */
.vlx-stack[data-mode="hero"] .vlx-stack-cards {
  --vlx-mx: 0;
  --vlx-my: 0;
  transform:
    rotateY(calc(var(--vlx-mx) * 5deg))
    rotateX(calc(var(--vlx-my) * -3deg));
  transition: transform 240ms cubic-bezier(0.25, 0.8, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .vlx-stack[data-mode="hero"] .vlx-stack-cards {
    transform: none !important;
  }
}

/* Reflected sheen on the recommended (Pro) card.  Reads as
 * "alive" without competing with the conic-sweep animation
 * landed in Pass 145. */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]::before {
  /* Inherit the existing "MOST POPULAR" ribbon styles + add
     a slow gradient-position shift so the ribbon reads as a
     metallic strip rather than a static pill. */
  background: linear-gradient(
    135deg,
    var(--brand-primary-bright, #B14CFF) 0%,
    var(--brand-primary, #8B2FD6) 50%,
    var(--brand-primary-bright, #B14CFF) 100%
  );
  background-size: 200% 200%;
  animation: vlx-ribbon-flow 4s ease-in-out infinite;
}
@keyframes vlx-ribbon-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]::before {
    animation: none;
  }
}

/* ── Responsive collapse: stack vertically on phones ─────── */
@media (max-width: 720px) {
  .vlx-stack[data-mode="hero"] .vlx-stack-cards,
  .vlx-stack[data-mode="grid"] .vlx-stack-cards,
  .vlx-stack[data-mode="compact"] .vlx-stack-cards {
    grid-template-columns: 1fr;
    perspective: none;
    transform: none !important;
  }
  .vlx-stack[data-mode="hero"] .vlx-card {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}