/* Shared billing plan-card styles — single source of truth for card UI.
   Consumed by the public site, the billing portal preview, and the playground.
   Tokens are scoped to .pc-card so the card renders identically in any host
   (no dependency on a host-defined --gold). Edit here to restyle everywhere. */

.pc-card {
  /* self-contained brand tokens */
  --pc-gold-soft: #e8b87a;
  --pc-ink: #f7f4ef;
  --pc-text: #fff;
  --pc-muted: #c0b8ae;
  --pc-faint: #9e9489;

  /* per-plan accent (set inline from plan.accent_color); defaults to gold */
  --pc-accent: #b07d2c;
  --pc-accent-soft: rgba(176, 125, 44, 0.15);
  --pc-accent-line: rgba(176, 125, 44, 0.5);
  --pc-accent-text: var(--pc-gold-soft);   /* lighter accent for subhead/checkmarks */

  position: relative;
  text-align: center;
  border-radius: 20px;
  padding: 62px 36px 40px;
  background: var(--pc-accent-soft);
  border: 1.5px solid var(--pc-accent-line);
}

.pc-card--featured {
  border-width: 2px;
}


.pc-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pc-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 28px;
  border-radius: 20px;
  white-space: normal;
  text-align: center;
  width: calc(85% - 27px);
  max-width: calc(85% - 27px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pc-tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pc-accent-text);
  margin-bottom: 10px;
}

.pc-name {
  font-family: "Fraunces", serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--pc-ink);
  line-height: 1.3;
  margin-bottom: 16px;
}
.pc-card:not(.pc-card--featured) .pc-name {
  font-size: 22px;
  margin-bottom: 12px;
}

.pc-amount {
  font-size: 36px;
  font-weight: 500;
  color: var(--pc-text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 18px;
}
.pc-amount span {
  font-size: 18px;
  font-weight: 400;
  color: var(--pc-faint);
}

.pc-gst-note {
  font-size: 11px;
  color: var(--pc-faint);
  margin: -12px 0 16px;
  letter-spacing: 0.02em;
}

.pc-sub {
  font-size: 13px;
  color: var(--pc-faint);
  line-height: 1.6;
  margin: 10px 0 22px;
}

.pc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.pc-features li {
  font-size: 13px;
  color: var(--pc-muted);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
}
.pc-features li::before {
  content: "✓";
  color: var(--pc-accent-text);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.pc-features li:has(> a:only-child)::before {
  content: none;
}

/* CTA — solid accent (per-plan; defaults to gold). */
.pc-btn {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  border-radius: 9px;
  background: var(--pc-accent);
  color: #fff;
  transition: filter 0.15s, box-shadow 0.15s;
}
.pc-btn:hover {
  filter: brightness(0.92);
}
.pc-btn--featured {
  padding: 14px 20px;
}
.pc-btn--primary {
  width: 100%;
  padding: 13px 20px;
  box-shadow: 0 12px 28px var(--pc-accent-line);
}
.pc-btn--primary:hover {
  box-shadow: 0 14px 32px var(--pc-accent-line);
}
/* Non-interactive contexts (billing preview, playground). */
.pc-btn--static {
  cursor: default;
}

.pc-coupon {
  margin-top: 12px;
  font-size: 13px;
}
.pc-coupon a {
  color: var(--pc-accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.pc-footer {
  margin-top: 18px;
  font-size: 11px;
  color: var(--pc-faint);
  line-height: 1.62;
  text-align: left;
}