/* ------------------------------------------------------------------
   Plans — two short rows of prices, then the order log
   ------------------------------------------------------------------ */

.plans-head { padding-top: var(--s-8); }
.plans-head h1 { font-size: var(--t-display); max-width: 18ch; }
.plans-head p {
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: var(--t-lead);
  color: var(--ink-2);
}

.plan-block { padding-top: var(--s-8); }
.plan-block__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.plan-block__head h2 { font-size: var(--t-h2); white-space: nowrap; }
.plan-block__head p { font-size: var(--t-sm); color: var(--muted); }

@media (max-width: 560px) {
  /* Side by side, a two-word heading breaks and the note reads as a caption. */
  .plan-block__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .plans-head { padding-top: var(--s-7); }
  .plan-block { padding-top: var(--s-7); }
  .plan { padding: var(--s-4); }
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--s-4);
  padding-top: var(--s-5);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.plan--featured {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}
.plan__kind {
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--seal);
}
.plan__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.012em;
}
.plan__price {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan__price small {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
.plan__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.plan__list li { display: flex; gap: 8px; align-items: baseline; }
.plan__list .i { color: var(--accent); flex: none; transform: translateY(3px); }
.plan__limit { font-size: var(--t-xs); color: var(--muted); }
.plan__cta { margin-top: auto; padding-top: var(--s-2); }

.orders { padding-top: var(--s-8); }
.orders__table { padding-top: var(--s-3); font-size: var(--t-sm); }
.order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 10px var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.order__main { min-width: 0; }
.order__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order__sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order__amount { font-variant-numeric: tabular-nums; color: var(--ink-2); }

@media (max-width: 560px) {
  .order { grid-template-columns: minmax(0, 1fr) auto; }
  .order__sub { display: none; }
}