/* bulldial.com — pricing page. Extends bd.css; owns the segmented
 * switch, the plan cards and the capability matrix. Tokens only. */

.price-head { max-width: 56ch; margin-bottom: var(--sp-5); }
.price-head h1 { font-size: var(--t-h1); letter-spacing: -0.03em; }
.price-head p { margin-top: var(--sp-2); color: var(--ink-2); }

/* ── segmented switch ───────────────────────────────────────────────── */

.seg {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-6);
}
.seg-btn {
  padding: 8px 22px; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  transition: background var(--d-1) var(--smooth), color var(--d-1) var(--smooth);
}
.seg-btn.on { background: var(--ink); color: var(--bg); }

/* ── plans ──────────────────────────────────────────────────────────── */

.plan-row { display: grid; gap: var(--sp-4); align-items: stretch; }
.plan-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .plan-row.two, .plan-row.three { grid-template-columns: 1fr; } }

.plan { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan.lift { border-color: var(--accent); box-shadow: var(--e-2); }
.plan-name {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-3);
}
.plan-price { font-size: 2rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1; }
.plan-price small { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.plan-calls { font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-2); }

.plan-list { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-list li {
  position: relative; padding-left: 18px;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
}
.plan-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 2px; border-radius: 1px; background: var(--accent);
}

.plan-wait { display: flex; gap: var(--sp-2); }
.plan-wait .field { flex: 1; min-width: 0; }
@media (max-width: 480px) { .plan-wait { flex-direction: column; } }
.plan-note { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; }
.plan .btn.block { margin-top: auto; }

/* ── matrix ─────────────────────────────────────────────────────────── */

.price-matrix { margin-top: var(--sp-5); }
.price-matrix td, .price-matrix th { text-align: center; }
.price-matrix td.left, .price-matrix th.left { text-align: left; }
.price-matrix td.y { color: var(--accent); font-size: 0.7rem; }
.price-matrix td.n { color: var(--ink-3); }

.price-foot {
  margin-top: var(--sp-5); font-size: var(--t-xs); color: var(--ink-3);
  line-height: 1.7; max-width: 76ch;
}
.price-foot a { color: var(--accent); }