/* ============ Voxbridge pricing section — voxbridge.html only ============
   Additive layer on top of styles.css. Reuses the shared pricing vocabulary
   (.pricing-grid / .pricing-card / .tier-*) so the section is born consistent
   with the homepage offer. This file only adds the billing toggle, the soft
   "best value" badge variant, the "Soon" pill on the CTAs, and the trial /
   price footnotes. Every colour rides the page tokens — nothing hard-coded. */

/* ---------- section framing ---------- */
.vox-pricing { padding-bottom: clamp(48px, 6vw, 90px); }

/* ---------- monthly / yearly toggle ---------- */
.vox-billing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
.vox-billing__toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  background: linear-gradient(180deg, var(--t-bg-glass-1), var(--t-bg-glass-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.vox-billing__opt {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vox-billing__opt:hover { color: var(--t-text); }
.vox-billing__opt.is-active {
  color: var(--t-cta-text);
  background: var(--t-grad-gold);
  border-color: rgba(var(--t-accent-bright-rgb), 0.5);
  box-shadow: 0 8px 22px rgba(var(--t-accent-rgb), 0.24);
}
.vox-billing__save {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--t-accent-bright);
  transition: opacity .25s ease;
}
.vox-billing__save[hidden],
.vox-period--yearly[hidden] { display: none; }

/* ---------- "Best value" badge — quiet sibling of the gold one ---------- */
.tier-badge--soft {
  background: rgba(var(--t-accent-rgb), 0.12);
  color: var(--t-accent-bright);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.45);
  box-shadow: none;
}

/* ---------- CTAs — "Soon" pill (launch-day App Store links land here) ---------- */
.vox-cta { cursor: default; }
.vox-cta__soon {
  margin-inline-start: auto;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--t-accent-bright);
  background: rgba(var(--t-accent-rgb), 0.10);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.45);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.tier-cta--accent .vox-cta__soon {
  color: var(--t-cta-text);
  border-color: color-mix(in srgb, var(--t-cta-text) 40%, transparent);
  background: color-mix(in srgb, var(--t-cta-text) 10%, transparent);
}

/* ---------- trial + price footnotes ---------- */
.vox-trial {
  margin: clamp(28px, 3vw, 40px) auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--t-text-muted);
}
.vox-trial__main {
  color: var(--t-accent-bright);
  font-weight: 600;
  letter-spacing: .06em;
}
.vox-price-note {
  margin: 10px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-text-faded);
}

/* ---------- calm motion: reduced-motion users get zero animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .vox-billing__opt,
  .vox-billing__save { transition: none; }
}