/* 613OS — pricing v2 component. Loads after site.css; only what .pricing-v2 needs beyond .plans/.plan. Uses site.css tokens. */

/* controls row: vertical selector (left) + billing toggle (right); wraps on phones */
.pricing-v2 .pv-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:clamp(20px,3vw,30px)}
.pricing-v2[data-lock-vertical] .pv-verticals{display:none}
.pricing-v2[data-lock-vertical] .pv-controls{justify-content:flex-start}

/* vertical selector pills */
.pv-verticals{display:flex;flex-wrap:wrap;gap:8px}
.pv-pill{font:inherit;font-family:var(--head);font-weight:600;font-size:14px;line-height:1;color:var(--blue-deep);background:var(--blue-tint);border:1.5px solid transparent;border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.pv-pill:hover{background:var(--blue-tint2)}
.pv-pill[aria-pressed="true"]{background:var(--blue-deep);color:#fff}
.pv-pill:focus-visible,.pv-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* annual | monthly toggle */
.pv-billing{display:inline-flex;flex-wrap:wrap;gap:2px;border:1.5px solid var(--rule);border-radius:999px;padding:3px;background:#fff}
.pv-billing[hidden]{display:none} /* static markup ships the toggle hidden; pricing.js removes the attribute on init (JS-off pages show the annual prices) */
.pv-toggle{font:inherit;font-family:var(--head);font-weight:600;font-size:14px;line-height:1;color:var(--blue-deep);background:transparent;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.pv-toggle:hover{background:var(--blue-tint)}
.pv-toggle[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.pv-toggle[aria-pressed="true"]:hover{background:var(--gold)}

/* price block: big per-month figure, "billed annually" under it, yearly total small */
.pricing-v2 .plan .price{font-size:clamp(32px,3.4vw,40px);font-weight:800;line-height:1;letter-spacing:-0.02em;margin-top:2px}
.pricing-v2 .plan .price .pv-per{font-size:16px;font-weight:600;letter-spacing:0;margin-left:2px}
.pricing-v2 .plan .price.pv-custom{font-size:22px;line-height:1.25;letter-spacing:-0.01em}
.pv-billed{font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);margin-top:-6px}
.pv-yearly{font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:-6px}
.plan.featured .pv-billed,.plan.deep .pv-billed{color:var(--gold)}
.plan.featured .pv-yearly,.plan.deep .pv-yearly{color:#CFE0FA}

/* users + unlimited lines under the bullets */
.pv-meta{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:12px;border-top:1px solid var(--blue-tint2);font-size:13.5px;line-height:1.45;color:var(--muted)}
.pv-meta b{font-weight:600;color:var(--blue-deep)}
.plan.featured .pv-meta,.plan.deep .pv-meta{color:#CFE0FA;border-top-color:rgba(255,255,255,0.22)}
.plan.featured .pv-meta b,.plan.deep .pv-meta b{color:#fff}

/* featured (Pro) card */
.pricing-v2 .plan.featured{box-shadow:0 14px 40px rgba(11,61,145,0.18);outline:2px solid var(--gold);outline-offset:-2px}

/* notes under the cards */
.pricing-v2 .plans-note+.plans-note{margin-top:6px}
.pv-all{display:none}
.pricing-v2[data-lock-vertical] .pv-all{display:block}
.pv-all a{font-weight:600}

/* phones: cards already stack via site.css (.plans at 860px); keep controls on one line where they fit */
@media (max-width:860px){.pricing-v2 .plan .price{font-size:34px}}
@media (max-width:420px){.pv-pill{padding:8px 13px;font-size:13px}.pv-toggle{padding:8px 11px;font-size:13px}}