/* ==========================================================================
   PRICING page (page-pricing.php)
   Scoped page styles - prefix .pricing-. Shared vocabulary (v-*) lives in
   assets/css/main.css and is composed in markup, never redefined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero toggles (billing period + site tier) - the centerpiece controls.
   Segmented glass pills on the dark hero; the active segment is violet.
   Hooks (do not rename): #v-billing [data-mode], #v-tier [data-t], .on
   -------------------------------------------------------------------------- */
.pricing-toggles{display:flex;justify-content:center;align-items:flex-end;gap:36px;flex-wrap:wrap;margin-top:46px}
.pricing-toggle-group{display:grid;gap:10px;justify-items:center}
.pricing-toggle-label{color:var(--d-faint)}
.pricing-toggle{display:inline-flex;gap:4px;padding:5px;border-radius:999px;
  border:1px solid var(--d-line-2);background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pricing-toggle button{appearance:none;border:0;cursor:pointer;background:transparent;color:var(--d-muted);
  font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  padding:10px 20px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  transition:background .18s,color .18s,box-shadow .18s}
.pricing-toggle button:hover{color:var(--d-head)}
.pricing-toggle button.on{background:var(--violet);color:var(--paper);box-shadow:0 8px 22px -8px rgba(124,92,255,.7)}
.pricing-toggle button.on:hover{color:var(--paper)}
.pricing-save{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.13);color:var(--d-text)}
.pricing-toggle button.on .pricing-save{background:rgba(255,255,255,.22);color:var(--paper)}

/* perforation divider between the toggles and the plan cards */
.pricing-perf{margin:56px 0 46px}

/* --------------------------------------------------------------------------
   Plan cards (compose .v-prices / .v-price from main.css)
   -------------------------------------------------------------------------- */

/* free-core card: honest emphasis via the green "free forever" badge */
.pricing-badge-free,.pricing-badge-plain{align-self:flex-start;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.pricing-badge-free{color:var(--green);background:rgba(31,169,122,.16)}
.pricing-badge-plain{color:var(--d-muted);background:rgba(255,255,255,.07);border:1px solid var(--d-line)}
.pricing-free{border-color:rgba(31,169,122,.4)}

/* billing note under each price (content swaps annual/lifetime via JS) */
.pricing-note{font-size:13.5px;color:var(--d-muted);margin:12px 0 0;min-height:40px}

/* bundle card: the add-on chip links need a block list item, not the
   shared flex row - one marked instance only */
.pricing-plans .v-price li.pricing-has-addons{display:block}
.pricing-has-addons svg{display:inline-block;vertical-align:-3px;margin-right:10px}
.pricing-addons{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 0 28px}
.pricing-addons a{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--violet-l);
  border:1px solid var(--d-line-2);background:rgba(255,255,255,.05);
  padding:5px 11px;border-radius:999px;transition:border-color .15s,color .15s,background .15s}
.pricing-addons a:hover{color:var(--paper);border-color:var(--violet-l);background:rgba(124,92,255,.16)}

/* tax note under the plan grid */
.pricing-tax{margin:28px 0 0;color:var(--d-faint);font-size:13.5px}

/* --------------------------------------------------------------------------
   Free-vs-addon comparison (compose .v-compare-wrap / .v-compare)
   -------------------------------------------------------------------------- */
.pricing-compare{max-width:920px;margin-left:auto;margin-right:auto}
.pricing-addon-name{color:var(--muted);font-weight:500}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .pricing-toggles{gap:26px}
  .pricing-note{min-height:0}
  .pricing-compare{max-width:none}
}
@media(max-width:768px){
  .pricing-toggles{flex-direction:column;align-items:center;gap:24px;margin-top:38px}
  .pricing-perf{margin:44px 0 38px}
}
@media(max-width:520px){
  .pricing-toggle{max-width:100%}
  .pricing-toggle button{padding:9px 14px;font-size:13.5px}
}

/* --------------------------------------------------------------------------
   Reduced motion - file-local transitions: toggle buttons, add-on chips
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .pricing-toggle button,.pricing-addons a{transition:none}
}