/* Marketing — pricing page. See landing/base.css. */

/* =====================================================================
   PRICING (3b)
   ===================================================================== */
.pricing-hero { text-align: center; padding: 52px 40px 8px; }
.pricing-hero h1 { font-size: clamp(34px, 4.5vw, 46px); }
.pricing-hero .hero-sub { margin: 14px auto 0; font-size: 18px; }

.plans { padding: 0 40px; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 36px 0 0;
  margin: 0;
  list-style: none;
  align-items: stretch;
}
.plan {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.plan h2 { font-size: 24px; }
.plan-fit {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 6px 0 0;
  min-height: 60px;
}
.plan-price { margin: 14px 0 0; }
.plan-price .amount { font-family: var(--font-display); font-size: 38px; }
.plan-price .per {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.plan-rule { display: block; height: 1px; background: var(--hairline); margin: 18px 0 14px; }
.plan-feats {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.plan-feats li { display: flex; gap: 9px; }
.plan-feats li::before { content: "✦"; color: var(--amber); flex: none; }
.plan .btn { margin-top: 22px; height: 42px; }
.plan-feats { margin-bottom: auto; }

/* featured: ink card with gold pill overlapping the top edge */
.plan-featured { background: var(--ink); border-color: var(--ink); }
.plan-featured h2, .plan-featured .plan-price .amount { color: var(--on-ink); }
.plan-featured .plan-fit { color: var(--on-ink-muted); }
.plan-featured .plan-price .per { color: #9d9186; }
.plan-featured .plan-rule { background: rgba(240, 233, 220, .14); }
.plan-featured .plan-feats { color: #f0e9dc; }
.plan-featured .plan-feats li::before { color: var(--gold); }
.plan-flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--gold-ink);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* white label: amber-tint card with dashed border */
.plan-whitelabel { background: var(--amber-bg); border: 1px dashed #c9a86a; }
.plan-whitelabel .plan-rule { background: var(--amber-border); }
.plan-whitelabel .amount-contact {
  font-size: 32px;
  font-style: italic;
  color: var(--amber);
}
.plan-note { text-align: center; padding: 22px 0 40px; font-size: 13px; color: var(--text-faint); margin: 0; }


@media (max-width: 1024px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .plans { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .plan-grid { grid-template-columns: 1fr; }
}