/* The four plan cards, one design wherever they appear: the plans page draws
   them from /api/billing, the landing's pricing section carries them as
   markup. Change a card here and both follow. */

/* ---------- Cards ---------- */
.plans-grid {
  width: 100%;
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.plan.is-current, .plan.is-picked { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.plan-top { padding: 20px 22px 16px; display: flex; flex-direction: column; }
.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 30px; }
.plan-icon { width: 32px; height: 32px; color: var(--brand); flex: none; }
.plan-pill {
  font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--brand-wash); color: var(--brand-strong);
}
.plan-pill.is-ending { background: var(--warn-wash); color: var(--warn); }
.plan-name { margin: 12px 0 0; font-family: var(--display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.015em; }
.plan-tag { margin: 4px 0 0; color: var(--fg-2); font-size: 0.875rem; line-height: 1.4; min-height: 2.8em; }
.plan-price { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; }
.plan-price b { font-family: var(--display); font-weight: 600; font-size: 2.3rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.plan-price span { font-size: 0.75rem; line-height: 1.3; color: var(--fg-3); }

.plans-btn {
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg);
  cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease;
}
.plans-btn:hover { background: var(--surface-2); }
.plans-btn.is-brand { border-color: transparent; background: var(--grad-brand, var(--brand)); color: var(--on-brand, #fff); }
.plans-btn.is-brand:hover { opacity: 0.92; background: var(--grad-brand, var(--brand)); }
a.plans-btn { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
.plans-btn:disabled { cursor: default; color: var(--fg-3); background: var(--surface-2); border-color: var(--line); }
.plan-fine { margin: 8px 0 0; text-align: center; font-size: 0.75rem; color: var(--fg-3); min-height: 1.1em; }

.plan-body { flex: 1; border-top: 1px solid var(--line); padding: 16px 22px 20px; }
.plan-body :is(h3, h4) { margin: 0 0 10px; font-size: 0.875rem; font-weight: 600; color: var(--fg); }
.plan-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.plan-body li { position: relative; padding-left: 22px; font-size: 0.8125rem; line-height: 1.4; color: var(--fg-2); overflow-wrap: anywhere; }
.plan-body li::before {
  content: ""; position: absolute; left: 3px; top: 0.3em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--brand); border-bottom: 1.5px solid var(--brand);
  transform: rotate(-45deg);
}

/* ---------- The promises under the cards ---------- */
.plans-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.plans-assure li { font-size: 0.8125rem; color: var(--fg-3); }
.plans-assure li + li::before { content: "·"; margin-right: 22px; margin-left: -12px; color: var(--fg-4); }

@media (max-width: 1080px) { .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 600px) {
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-tag { min-height: 0; }
  /* One promise to a line: wrapped, each separator dot was left hanging at
     the start of its own row. */
  .plans-assure { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .plans-assure li + li::before { content: none; }
}