/* ==========================================================================
   Pricing page: billing switch, plan cards, comparison table, credits.
   The switch (#billing-switch) sets [data-billing] on [data-pricing] via main.js.
   ========================================================================== */

/* Show the right price for the selected billing period */
[data-billing="monthly"] .price-annual,
[data-billing="annual"] .price-monthly { display: none; }

/* Billing switch */
.billing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-bottom: 40px; }
.billing__switch { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; }
.billing__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.billing__track {
  position: relative; width: 52px; height: 30px; border-radius: var(--r-pill);
  background: var(--c-sand-deep); transition: background-color .2s var(--ease);
}
.billing__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-white); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease);
}
.billing__switch input:checked + .billing__track { background: var(--c-purple); }
.billing__switch input:checked + .billing__track::after { transform: translateX(22px); }
.billing__switch input:focus-visible + .billing__track { outline: 2px solid var(--c-purple); outline-offset: 3px; }
.billing__save { padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-green-soft); color: var(--c-green); font-size: var(--t-label); font-weight: 600; }
.billing__vat { width: 100%; text-align: center; color: var(--c-muted); font-size: var(--t-small); }

/* Plans */
.plans { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px); border: 1px solid var(--c-line); border-radius: var(--r-xl); background: var(--c-white);
}
.plan-card--featured { border-color: var(--c-ink); box-shadow: var(--shadow-md); }
.plan-card__badge { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-purple); color: var(--c-white); font-size: var(--t-label); font-weight: 600; }
.plan-card h3 { font-size: 1.12rem; }
.plan-card__for { margin-top: 8px; color: var(--c-ink-soft); min-height: 3.2em; }
.plan-card__price { margin: 22px 0 4px; font-size: 2.4rem; line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.plan-card__price small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--c-muted); }
.plan-card__period { min-height: 1.5em; color: var(--c-muted); font-size: var(--t-small); }
.plan-card .btn { margin: 24px 0; }
.plan-card__label { margin-bottom: 12px; font-size: var(--t-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }

/* Comparison table */
.compare { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-white); }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-small); }
.compare th, .compare td { padding: 13px 18px; border-bottom: 1px solid var(--c-line); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { position: sticky; top: 0; background: var(--c-paper); font-size: 1rem; }
.compare tbody th[colspan] { padding-top: 22px; background: var(--c-white); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--c-purple); }
.compare tbody td:first-child { color: var(--c-ink-soft); }
.compare .yes { color: var(--c-green); font-weight: 700; }
.compare .no { color: var(--c-sand-deep); }
.compare tr:last-child td { border-bottom: 0; }
.compare-note { margin-top: 16px; color: var(--c-muted); font-size: var(--t-small); text-align: center; }

/* Credits */
.credit-card h3 { margin-bottom: 4px; }
.credit-card__from { font-weight: 600; color: var(--c-purple) !important; }
.credit-card dl { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--c-line); }
.credit-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--c-line); }
.credit-card dt { color: var(--c-ink-soft); }
.credit-card dd { font-weight: 600; }

/* Trial page: two plans, centred */
@media (min-width: 900px) { .plans--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; } }
.trial-note { margin-top: 24px; text-align: center; color: var(--c-ink-soft); }