/* Pricing — plan cards + comparison. Data comes from PLAN_* ids. */

.plan-grid{
  display: grid; gap: 16px; margin-top: 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.plan-card{
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
  padding: 22px 18px; background: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.plan-card.is-featured{
  border-color: var(--burgundy);
  background: var(--cream-2);
}
.plan-card .mark{
  font-family: var(--lat); font-size: 11px; letter-spacing: .14em;
  color: var(--gold); text-transform: uppercase;
}
.plan-card h2{margin: 0; font-size: 22px}
.plan-card .price{font-family: var(--lat); font-size: 28px; font-weight: 700; color: var(--gold-2)}
.plan-card .price span{font-size: 14px; font-weight: 400; color: var(--muted)}
.plan-card .blurb{margin: 0; color: var(--ink-soft); font-size: 14px; flex: 1}
.plan-card .btn{margin-top: 8px}
.plan-card .btn.is-disabled{opacity:.55;pointer-events:none}
.save-note{margin:0;font-size:13px;color:var(--burgundy)}
.cycle-toggle{display:flex;gap:8px;justify-content:center;margin:24px 0 0}
/* body.site .btn.ghost is (0,3,1) and would keep burgundy text on the burgundy pill */
body.site .cycle-toggle .btn.ghost.is-active{
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
}
body.site .cycle-toggle .btn.ghost.is-active:hover{
  background: var(--burgundy-2);
  color: var(--cream);
  border-color: var(--burgundy-2);
}
.plan-owned{
  margin-top:32px;
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  padding:22px 18px;
  background:#fff;
}
.plan-owned .muted{color:var(--ink-soft)}

.compare{margin-top: 56px; overflow-x: auto}
.plan-table{
  width: 100%; border-collapse: collapse; font-size: 15px;
}
.plan-table th, .plan-table td{
  padding: 12px 10px; text-align: start;
  border-bottom: 1px solid var(--gold-dim);
}
.plan-table th{color: var(--gold-2); font-weight: 600}
.plan-table td{color: var(--ink-soft)}
.plan-table th:not(:first-child), .plan-table td:not(:first-child){
  text-align: center; font-family: var(--lat);
}

@media (max-width: 900px){
  .plan-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px){
  .plan-grid{grid-template-columns: 1fr}
}