/* =========================================================================
   ONE BOOST — pricing.css
   Refinements on top of the .price-card rules in cards.css (this file loads
   AFTER cards.css, so it wins where they overlap). Adds the plan term, the
   computed per-month / saving row, and the trust strip under the grid.

   ⚠️ Effect-safety (README): no rotate/scale, no fixed layer. The featured
   card's animated ring lives in premium.css and rotates a GRADIENT ANGLE,
   not a box — do not replace it with a transform.
   ========================================================================= */

/* ---- header of each card: plan name + what the term actually is ---- */
.pc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.price-card .plan { margin-bottom: 0; }

.pc-term {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* ---- the computed row: per-month equivalent + saving ----
   Both start `hidden`. config.js fills them ONLY when the panel supplies real
   prices, so an empty panel leaves the card exactly as it was. */
.pc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 0;
  min-height: 0;
}

/* Reserve the row ONLY when it actually has something in it — otherwise an
   empty panel (today's state) leaves 26px of dead space under every price.
   `:has()` is unsupported in old browsers, and there the default above is the
   better fallback anyway: no gap, no reservation. */
.pc-meta:has(> :not([hidden])) {
  margin-top: 10px;
  min-height: 26px;          /* keeps the four cards aligned once prices exist */
}

.pc-per {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.pc-save {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  color: #7BE3A8;
  background: rgba(52, 211, 153, .12);
  border: 1px solid rgba(52, 211, 153, .34);
  white-space: nowrap;
}

/* ---- the amount reads as money, not as a heading ---- */
.price-card .amount { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---- feature list sits closer to the meta row now ---- */
.price-card ul { margin: 20px 0 26px; }

/* ---- trust strip under the four cards ----
   Four short guarantees in one line on desktop, wrapping on a phone. This is
   the row that answers "what if it doesn't work for me" without another
   section. */
.pc-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.pc-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s, color .2s;
}
.pc-trust-item:hover { border-color: var(--line-2); color: var(--text); }
.pc-trust-item svg { width: 18px; height: 18px; flex: none; color: var(--red-ink); }

@media (max-width: 1024px) {
  .pc-top { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 640px) {
  .pc-trust { gap: 9px; }
  .pc-trust-item { padding: 9px 14px; font-size: 13px; }
  .pc-meta { min-height: 0; }
}

/* ---- a hidden plan must not leave a hole ----
   config.js counts the cards still showing and stamps .cols-N on the grid.
   Scoped above 1024px ON PURPOSE: responsive.css already stacks the grid to
   2 and then 1 column below that, and `.pricing.cols-3` (0,2,0) would
   otherwise out-specify its `.pricing` (0,1,0) media rules and un-stack the
   cards on a phone. */
@media (min-width: 1025px) {
  .pricing.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .pricing.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
  .pricing.cols-1 { grid-template-columns: 1fr;            max-width: 400px; margin-inline: auto; }
}