/* ══════════════════════════════════════════════════════════
   WRENKIT — PRICING PAGE STYLES
   Page-specific CSS for pricing.html.
   Shared styles (root, reset, body, grain, header, nav)
   live in global.css.
   ══════════════════════════════════════════════════════════ */


/* ── PRICING HERO ───────────────────────────────────────── */

.pricing-hero {
  text-align: center; padding: 80px 24px 20px;
}

.pricing-eyebrow {
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--drift); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.pricing-eyebrow::before, .pricing-eyebrow::after {
  content: ''; width: 32px; height: 1px; background: var(--stone);
}

.pricing-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 300; color: var(--ink); margin-bottom: 16px;
}
.pricing-heading em { font-style: italic; color: var(--tide); }

.pricing-sub {
  font-size: 0.88rem; color: var(--drift); max-width: 420px;
  margin: 0 auto; line-height: 1.8;
}

/* ── PLAN CARDS ─────────────────────────────────────────── */

.plans-wrap {
  display: flex; gap: 24px; justify-content: center;
  padding: 48px 24px 80px; flex-wrap: wrap;
}

.plan-card {
  width: 320px; background: var(--sand); border: 1px solid var(--border);
  border-radius: 4px; padding: 40px 32px; position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px var(--shadow);
}
.plan-card.featured {
  border-color: var(--tide);
  box-shadow: 0 4px 24px rgba(74,107,110,0.12);
}

.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--tide); color: #fff;
  font-size: 0.54rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 4px 16px; border-radius: 40px;
}

.plan-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-weight: 400; color: var(--ink);
  margin-bottom: 8px; text-align: center;
}

.plan-price {
  text-align: center; margin-bottom: 24px;
}

.plan-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem; font-weight: 300; color: var(--ink);
}

.plan-period {
  font-size: 0.72rem; color: var(--drift); letter-spacing: 0.06em;
}

.plan-save {
  display: block; font-size: 0.64rem; color: var(--tide);
  letter-spacing: 0.1em; margin-top: 4px;
}

.plan-features {
  list-style: none; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.plan-features li {
  font-size: 0.78rem; color: var(--drift);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: 0.02em;
}
.plan-features li::before {
  content: '\2713'; color: var(--tide); font-size: 0.75rem; flex-shrink: 0;
}

.plan-btn {
  width: 100%; padding: 14px;
  background: var(--tide); color: #fff; border: none;
  border-radius: var(--r); font-family: 'Jost', sans-serif;
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.plan-btn:hover { background: #3a5658; transform: translateY(-1px); }
.plan-btn:active { transform: translateY(0); }
.plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.plan-note {
  text-align: center; margin-top: 12px;
  font-size: 0.64rem; color: var(--stone); letter-spacing: 0.04em;
}

/* ── CURRENT PLAN BADGE ─────────────────────────────────── */

.plan-current-badge {
  display: block; text-align: center;
  font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #3a6a3a; background: #e0ede0;
  padding: 4px 14px; border-radius: 40px;
  margin: 0 auto 12px; width: fit-content;
}

.plan-btn-manage {
  background: transparent; color: var(--tide);
  border: 1px solid var(--tide);
}
.plan-btn-manage:hover {
  background: var(--tide); color: #fff;
}

.plan-btn-disabled {
  background: var(--warm); color: var(--stone);
  border: 1px solid var(--border); cursor: default;
}
.plan-btn-disabled:hover {
  background: var(--warm); transform: none;
}

/* ── MESSAGE ────────────────────────────────────────────── */

.pricing-message {
  max-width: 520px; margin: 0 auto 24px; padding: 10px 14px;
  border-radius: var(--r); font-size: 0.78rem; text-align: center; display: none;
}
.pricing-message.error { display: block; background: #f5e8e8; color: #8e4a4a; border: 1px solid #e0c8c8; }
.pricing-message.success { display: block; background: #e8f0e8; color: #4a6e4a; border: 1px solid #c8dcc8; }

/* ── RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .plans-wrap { flex-direction: column; align-items: center; }
}