/**
 * Pipezoom - css/plan.css, the plan cards of the Plan page (plan.php).
 * The 3 cards are laid out by components.css's .grid.g3 and take its .card; this file sets the price, the
 * feature rows, the current plan's edge and the row ?feature= marks. Tokens from base.css only.
 * Defines .plan-card, .plan-card-now, .plan-top, .plan-name, .plan-price, .plan-feats, .plan-feat,
 * .plan-feat-off, .plan-feat-hit, .plan-ic, .plan-sr, .plan-who.
 * Notes: docs/notes/app.pipezoom.com/css/plan.css.md
 */
.plan-card{display:flex;flex-direction:column;gap:4px;}
/* The current plan's card has the accent edge all the way round, hover or not. */
.plan-card-now,
.plan-card-now:hover{border-color:var(--accent);}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;}
.plan-name{margin:0;font-size:1.08rem;font-weight:700;}
.plan-price{margin:0 0 8px;color:var(--ink-soft);font-size:.86rem;}
.plan-price b{color:var(--ink);font-size:1.35rem;font-weight:700;margin-right:3px;}

/* The rows are a plain list; components.css gives .card ul a margin and a marker. */
.card ul.plan-feats{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.card .plan-feat{
  display:flex;align-items:center;gap:8px;
  margin:0;padding:5px 8px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:.89rem;line-height:1.4;
  color:var(--ink);
  /* Clear of the sticky top bar when the browser scrolls to a focused row. */
  scroll-margin-top:calc(var(--topbar-h) + 18px);
}
.card .plan-feat-off{color:var(--ink-faint);}
.plan-ic{color:var(--ink-faint);flex-shrink:0;}
/* The row ?feature= names: a neutral edge on the wash, and the ink stays the ink. */
.card .plan-feat-hit{background:var(--accent-wash);border-color:var(--line-strong);color:var(--ink);}
.plan-feat-hit:focus{outline:none;}
.plan-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.plan-who{margin-top:16px;}