/* Nexa pricing — beta-free hero card + climbing one-time ladder. Uses site.css tokens. */

.px-flag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue);
}
.px-flag .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); animation: pulse 2.2s ease-out infinite;
}
.px-lead { margin-top: 18px; max-width: 54ch; font-size: var(--fs-sub); color: var(--ink-60); line-height: 1.65; }
.px-lead b { color: var(--ink); font-weight: 600; }

.px-grid {
  margin-top: clamp(34px, 5.5vh, 54px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(16px, 2.4vw, 26px);
  align-items: stretch;
}

/* ---------- featured beta card ---------- */
.px-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 26px;
}
.px-card .px-stage {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 1px var(--glass-spec);
}
.px-card .px-stage .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); animation: pulse 2.2s ease-out infinite;
}
.px-price {
  margin-top: 26px;
  display: flex; align-items: flex-end; gap: 16px;
}
.px-was {
  font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.4vw, 36px);
  color: var(--ink-40); text-decoration: line-through;
  text-decoration-color: var(--blue); text-decoration-thickness: 2px;
  line-height: 1; padding-bottom: 10px;
}
.px-now {
  font-weight: 700; font-size: clamp(66px, 10vw, 104px); line-height: 0.86;
  letter-spacing: -0.04em; color: var(--ink);
}
.px-now .cur { color: var(--ink-40); font-weight: 500; }
.px-free {
  margin-top: 8px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: 0.04em;
  color: var(--blue);
}
.px-after { margin-top: 10px; font-size: var(--fs-lead); color: var(--ink-60); line-height: 1.55; max-width: 34ch; }
.px-list { list-style: none; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.px-list li {
  position: relative; padding-left: 26px;
  font-size: var(--fs-copy); color: var(--ink-60); letter-spacing: -0.005em;
}
.px-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 8px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
.px-cta {
  margin-top: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px; border-radius: var(--r-md);
  background: var(--pill-bg); color: var(--pill-ink);
  font-size: var(--fs-copy); font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 12px 30px rgba(12, 19, 34, 0.24);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.3s ease;
}
.px-cta .arr { transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4); }
.px-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(12, 19, 34, 0.3); color: var(--pill-ink); }
.px-cta:hover .arr { transform: translateX(5px); }

/* ---------- climbing ladder ---------- */
.px-ladder { display: flex; flex-direction: column; }
.px-ladder-head {
  font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-40); padding-bottom: 14px;
}
.px-steps { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.px-step {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 16px;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-spec);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
/* ascending stair feel — each rung steps in + lifts with the price */
.px-step:nth-child(2) { margin-left: clamp(0px, 1.4vw, 16px); }
.px-step:nth-child(3) { margin-left: clamp(0px, 2.8vw, 32px); }
.px-step:nth-child(4) { margin-left: clamp(0px, 4.2vw, 48px); }
.px-step:nth-child(5) { margin-left: clamp(0px, 5.6vw, 64px); }
.px-step:hover { transform: translateY(-2px); border-color: var(--glass-border); }
.px-step .px-limit { flex: 1; font-size: var(--fs-copy); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-60); }
.px-step .px-amt {
  flex: none; display: inline-flex; align-items: baseline; gap: 9px;
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
}
/* Paid rungs stack a spec caption over the price: "lifetime, not a subscription" is the whole
   pitch, so it reads right where the number lands. Kept micro-sized and muted so four rungs
   never turn into four shouting labels. */
.px-rung-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.px-lic {
  font-size: var(--fs-tiny); font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-40); white-space: nowrap;
}
.px-step.soon .px-lic { color: var(--blue); }
.px-step .px-amt s {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-base);
  color: var(--ink-40); text-decoration-color: var(--blue);
}
/* Live beta rung. Reza: "the ladder card current colour should keep clean card, only the bar
   itself, not the how many left etc". It was a fully blue-washed panel sitting in a column of
   plain ones, which made the whole rung read as a highlight rather than as a row with one live
   number in it. Same card as its neighbours now; what marks it live is the "Now" pill, a slightly
   stronger border, and the one thing that is genuinely data - the seat bar. */
.px-step.now {
  border-color: var(--glass-border);
}
.px-step.now, .px-step.soon { flex-direction: column; align-items: stretch; gap: 13px; }
/* pre-open beta rung — held, not live: quiet flag with the countdown instead of "Now" */
.px-step.soon { border-color: var(--glass-border); }
.px-step.soon .px-limit { color: var(--ink); }
.px-step.soon::after {
  content: attr(data-flag); position: absolute; top: -9px; right: 16px;
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60); background: var(--field-sheen);
  border: 1px solid var(--hairline);
  padding: 3px 9px; border-radius: var(--r-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.px-now-top { display: flex; align-items: center; gap: 16px; }
.px-step.now .px-limit { color: var(--ink); }
/* Seat meter. The bar is the one thing here that carries colour, because the bar IS the number.
   Its track was a hardcoded sky tint that ignored the theme, the fill had a glow and a shimmer
   sweeping across it forever, and the count beside it was blue too - so four things competed to
   say one fact. Flat blue bar, neutral track, and the count reads as the caption it is. */
.px-seats { display: flex; align-items: center; gap: 13px; }
.px-seats-track { flex: 1; height: 7px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.px-seats-fill { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.px-seats-left { flex: none; font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.01em; color: var(--ink-40); }
.px-step.now::after {
  content: "Now"; position: absolute; top: -9px; right: 16px;
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pill-ink); background: var(--blue);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.px-note { margin-top: 18px; font-size: var(--fs-lead); color: var(--ink-40); line-height: 1.6; }
.px-note em { color: var(--ink-60); }

@media (max-width: 900px) {
  .px-grid { grid-template-columns: 1fr; }
  .px-step:nth-child(n) { margin-left: 0; }
}
@media (max-width: 480px) {
  .px-step { flex-wrap: wrap; gap: 6px 16px; }
  .px-step .px-limit { order: 3; flex-basis: 100%; }
}

/* --- live pipeline states (hydrated by live.js) --- */
.px-live {
  display: inline-block; margin-left: 8px; padding: 2.5px 9px;
  border-radius: var(--r-pill); border: 1px solid var(--hairline);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-40); vertical-align: 1px;
}
/* When a later rung becomes the live one it brings this flag with it, so it follows the same
   rule as the rest of the rung: readable, not filled. */
.px-step.now .px-live { color: var(--ink-60); }
.px-step.locked { opacity: 0.62; }
.px-step.locked:hover { transform: none; }
.px-step.done { opacity: 0.55; }
.px-step.done .px-amt b { color: var(--ink-40); text-decoration: line-through; }
.px-step.done .px-live { color: var(--ink-40); }
/* beta card countdown */
.px-timer {
  display: flex; align-items: baseline; gap: 6px; margin: 14px 0 2px;
  font-variant-numeric: tabular-nums;
}
.px-timer[hidden] { display: none; }
.px-timer span {
  min-width: 44px; padding: 8px 6px; text-align: center;
  border-radius: 12px; border: 1px solid var(--hairline); background: var(--field-sheen);
  font: 700 19px var(--grotesk); letter-spacing: -0.01em; color: var(--ink);
}
.px-timer i { font: 500 var(--fs-tiny) var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-40); font-style: normal; }
/* Beta deadline countdown - the free window closes July 31, 2026 11:59 PM EST. It sits right
   above the CTA so the seat still feels time-boxed, but it was a solid blue block inside an
   otherwise glass card, which read as an alert rather than as a clock. Reza: "the beta end card
   as well, not full background this blue". The numbers carry it; the panel is a panel. */
.px-ends {
  margin: 18px 0 4px; padding: 14px 16px 13px; border-radius: 16px;
  border: 1px solid var(--hairline); background: var(--field-depth);
  box-shadow: inset 0 1px 0 var(--glass-spec);
}
.px-ends[hidden] { display: none; }
.px-ends-head {
  display: flex; align-items: center; gap: 7px;
  font: 700 var(--fs-small) var(--grotesk); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-40);
}
.px-ends-cells { display: flex; align-items: baseline; gap: 6px; margin-top: 11px; font-variant-numeric: tabular-nums; }
.px-ends-cells span {
  min-width: 46px; padding: 9px 6px; text-align: center; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--field-sheen);
  font: 700 21px var(--grotesk); letter-spacing: -0.02em; color: var(--ink);
}
.px-ends-cells i { font: 500 var(--fs-tiny) var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-40); font-style: normal; }
.px-ends-when { margin-top: 10px; font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-60); }
.px-ends.over .px-ends-cells { display: none; }
/* ladder echo of the same deadline, in the live beta rung */
.px-ends-chip { flex: 1; display: flex; justify-content: center; }
.px-ends-chip[hidden] { display: none; }
.px-ends-chip b {
  font: 700 var(--fs-small) var(--grotesk); text-transform: uppercase; letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums; color: var(--ink-60);
  border: 1px solid var(--hairline); background: var(--field-sheen);
  padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap;
}
.px-step.now .px-now-top .px-limit { flex: none; }
@media (max-width: 620px) { .px-ends-chip { display: none; } .px-step.now .px-now-top .px-limit { flex: 1; } }
/* phones: cells share the row instead of overflowing the card */
@media (max-width: 520px) {
  .px-ends-cells { gap: 4px; }
  .px-ends-cells span { flex: 1; min-width: 0; padding: 8px 2px; font-size: var(--fs-title); }
  .px-ends-cells i { font-size: var(--fs-micro); letter-spacing: 0.04em; }
}
/* reassurance under the CTA - the deadline closes the offer, not a claimed trial */
.px-keep {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 2px 0;
  font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-60);
}
/* display:flex out-specifies the UA [hidden] rule - restate it so live.js can hide the note */
.px-keep[hidden] { display: none; }
.px-keep svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.px-keep b { font-weight: 700; color: var(--ink); }
/* A one-time $49 with no refund line anywhere is the last thing a buyer checks and the
   first thing that stops them. It belongs on the card, not only in clause 04. */
.px-refund {
  margin: 10px 2px 0; padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-body); line-height: 1.5; color: var(--ink-40);
}
.px-refund b { font-weight: 600; color: var(--ink-60); }
.px-refund a { color: var(--blue); text-underline-offset: 3px; text-decoration: underline; }
/* locked claim CTA - visible but not clickable until July 15 */
.px-cta-locked { pointer-events: none; cursor: default; opacity: 0.62; }