/* ============================================================================
   Pricing — THE LADDER RISES.  Loaded by pricing.html only.

   This page's signature, and nobody else's (MOTION-CHARTER §3):
     1. Plan columns grow to their price height as you arrive. Each plan
        stands on a pillar whose height is its price on one scale. The pillar
        scales up from the floor and the card rides up on top of it — a pure
        function of how far the ladder has come up the screen.
     2. Module chips fly from the dock into the plan that includes them.
        A chip leaves its mark in the dock, arcs across, and lands in its slot
        inside the card. When it has landed, the real chip in the card takes
        over and the flying copy is gone.

   The PRICES never move. They are printed in the card and stay there.

   Without JS (or under reduced motion) every pillar stands at full height,
   every card sits on top of it, and every chip is already in its slot.
   ========================================================================== */

/* ----------------------------------------------------------- the ladder -- */
.pl-set{ position:relative; }
.pl-cols{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px;
  align-items:end;
  padding-top:var(--reserve, 256px);      /* room for the tallest pillar */
}
.plan{
  --t:1;                                  /* 0 = on the floor, 1 = risen. JS writes this. */
  --rise:var(--rise-d, 0px);              /* the pillar's full height, set per plan in the markup */
  display:flex; flex-direction:column; min-width:0;
}
.plan .price-card{
  transform:translateY(calc(var(--rise) * (1 - var(--t))));
  will-change:transform;                  /* scroll-driven: NEVER transitioned */
}
.plan-pillar{
  position:relative; height:var(--rise); margin:0 22px;
  transform:scaleY(var(--t)); transform-origin:50% 100%;
  border-radius:0 0 10px 10px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, var(--grad-end), var(--primary) 70%, var(--primary-dark));
  box-shadow:0 30px 50px -26px rgba(var(--primary-rgb),.6);
  will-change:transform;
}
.plan-pillar::before{                     /* the cap that lights once the plan has landed */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); opacity:0;
  box-shadow:0 0 14px 2px rgba(var(--accent-rgb),.7);
}
.plan.landed .plan-pillar::before{ opacity:1; }
.plan-pillar > i{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font:600 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7);
  white-space:nowrap;
}
/* the floor the pillars stand on */
.pl-floor{
  height:1px; margin-top:0;
  background:linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.35) 12%, rgba(var(--primary-rgb),.35) 88%, transparent);
}
.sec--dark .pl-floor{ background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.3) 12%, rgba(var(--accent-rgb),.3) 88%, transparent); }
.sec--dark .plan-pillar{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, rgba(var(--accent-rgb),.55), var(--primary-light) 55%, var(--primary-dark));
  box-shadow:0 30px 50px -26px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------- the dock -- */
/* The four built modules, as marks. Chips leave from here. */
.pl-dock{
  position:absolute; left:0; right:0; top:0; z-index:3;
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}
.pl-mark{
  display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:100px;
  background:#fff; border:1px solid var(--border); color:var(--text);
  font-size:13px; font-weight:600; box-shadow:0 14px 30px -18px rgba(15,77,114,.5);
}
.pl-mark img{ width:34px; height:34px; object-fit:contain; }
.pl-mark.spent{ opacity:.55; }            /* every one of its chips has left */
.pl-dock-cap{ position:absolute; left:0; right:0; top:58px; text-align:center; font-size:12.5px; color:var(--text-muted); }

/* ------------------------------------------------------------- the chips -- */
.plan-mods{ display:flex; flex-wrap:wrap; gap:8px; min-height:30px; }
.mod-chip{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px 0 4px; border-radius:100px;
  background:var(--bg-tint); border:1px solid rgba(var(--primary-rgb),.22); color:var(--primary);
  font-size:12.5px; font-weight:600; white-space:nowrap;
}
.mod-chip img{ width:24px; height:24px; object-fit:contain; }
.mod-chip i{ font-style:normal; }
.fx-on .mod-chip.away{ visibility:hidden; }    /* its flying copy is on the way */

.pl-flight{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.pl-flight .mod-chip{
  position:absolute; margin:0; opacity:0;
  box-shadow:0 18px 34px -16px rgba(15,77,114,.6);
  will-change:transform, opacity;
}

/* --------------------------------------------------------- pointer only -- */
.price-card{ transition:box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.price-card:hover{ border-color:rgba(var(--primary-rgb),.5); box-shadow:0 34px 60px -30px rgba(var(--primary-rgb),.5); }
.sec--dark .price-card:hover{ border-color:rgba(var(--accent-rgb),.45); }

/* ------------------------------------------------------------- footnotes -- */
.pl-foot{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
.pl-foot h4{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 8px; }
.pl-foot p{ margin:0; font-size:15px; line-height:1.55; color:var(--text-muted); }

.pl-agency{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:44px; align-items:center; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .pl-cols{ grid-template-columns:1fr; gap:30px; padding-top:0; }
  .plan{ --rise:0px; }
  .plan-pillar, .pl-floor, .pl-flight, .pl-dock-cap{ display:none; }
  .pl-dock{ position:static; justify-content:flex-start; margin-bottom:26px; }
  .pl-foot{ grid-template-columns:1fr; gap:22px; }
  .pl-agency{ grid-template-columns:1fr; gap:26px; }
}
@media (prefers-reduced-motion: reduce){
  .plan{ --t:1 !important; }
  .pl-flight{ display:none; }
  .mod-chip.away{ visibility:visible; }
}