/* ============================================================
   SUBSCRIPTION / PRICING PAGE
   ============================================================ */

/* ── Page hero ──────────────────────────────────────────────── */
.pricing-hero {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}

.pricing-hero h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
}

.pricing-hero p {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.6;
}

/* ── Trial callout ──────────────────────────────────────────── */
.trial-callout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--teal-bg);
  border: 1.5px solid rgba(13,148,136,.25);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  margin-top: 14px;
}

.trial-callout svg {
  width: 15px; height: 15px;
  stroke: var(--teal); fill: none; stroke-width: 2;
}

/* ── Billing toggle ─────────────────────────────────────────── */
.billing-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 32px;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
}

.billing-row .active-label { color: var(--ink); font-weight: 700; }

.pill-switch { position: relative; width: 44px; height: 24px; display: inline-block; }
.pill-switch input { opacity: 0; width: 0; height: 0; }
.pill-track {
  position: absolute; inset: 0; background: var(--teal);
  border-radius: 12px; cursor: pointer; transition: var(--ease);
}
.pill-track::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; background: white; border-radius: 50%;
  top: 3px; left: 3px; transition: var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pill-switch input:checked + .pill-track::after { transform: translateX(20px); }

.save-tag {
  background: #fef9c3; color: #854d0e; border: 1px solid #fde047;
  border-radius: 20px; font-size: 11px; font-weight: 700; padding: 2px 8px;
}

/* ── Pricing grid ───────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

/* ── Pricing card ───────────────────────────────────────────── */
.pricing-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: var(--ease);
  position: relative;
}

.pricing-card:hover { box-shadow: var(--shadow-md); }

/* ── Coloured top accent bar ────────────────────────────────── */
.card-accent {
  height: 4px;
  background: var(--teal);
  flex-shrink: 0;
}

.card-accent.blue  { background: #2563eb; }
.card-accent.dark  { background: #0f172a; }

/* ── Card body ──────────────────────────────────────────────── */
.card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }

/* ── Plan badge ─────────────────────────────────────────────── */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--teal);
  margin-bottom: 12px;
}
.plan-badge.blue { color: #2563eb; }
.plan-badge.dark { color: var(--ink-mid); }

.plan-badge-icon { font-size: 16px; }

/* ── Price ──────────────────────────────────────────────────── */
.card-price { display: flex; align-items: flex-end; gap: 3px; margin-bottom: 5px; }
.price-sym  { font-size: 20px; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; }
.price-amt  { font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -2px; line-height: 1; }
.price-per  { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }

.card-tagline {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ── Verification requirement ───────────────────────────────── */
.verify-req {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  flex-shrink: 0;
}

.verify-req svg {
  width: 14px; height: 14px; stroke: var(--teal); fill: none; stroke-width: 2; flex-shrink: 0;
}

.verify-req strong { color: var(--ink); font-weight: 600; }

/* ── Feature list ───────────────────────────────────────────── */
.feature-list {
  list-style: none; display: flex; flex-direction: column;
  gap: 9px; margin-bottom: 24px; flex: 1;
}

.feature-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--ink); line-height: 1.4;
}

.feature-list li svg {
  width: 15px; height: 15px; stroke: var(--teal); fill: none;
  stroke-width: 2.5; flex-shrink: 0; margin-top: 1px;
}

.feature-list li svg.blue  { stroke: #2563eb; }
.feature-list li svg.dark  { stroke: var(--ink-mid); }

.feature-list li.dim svg   { stroke: #cbd5e1; }
.feature-list li.dim       { color: var(--ink-soft); }

/* ── CTA button ─────────────────────────────────────────────── */
.card-cta {
  display: block; width: 100%; padding: 12px;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 700;
  text-align: center; cursor: pointer; transition: var(--ease);
  border: none; text-decoration: none;
}

.cta-teal  { background: var(--teal); color: white; }
.cta-teal:hover { background: var(--teal-dark); }

.cta-blue  { background: #2563eb; color: white; }
.cta-blue:hover { background: #1d4ed8; }

.cta-dark  { background: #0f172a; color: white; }
.cta-dark:hover { background: #1e293b; }

.cta-current {
  background: var(--surface-2); color: var(--ink-soft);
  border: 1.5px solid var(--border); cursor: default;
}

/* ── Current plan indicator ──────────────────────────────────── */
.current-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: #f0fdf4; border: 1px solid #86efac; color: #16a34a;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
}

/* ── FAQ / notes section ────────────────────────────────────── */
.pricing-notes {
  max-width: 980px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pricing-note {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.pricing-note h4 {
  font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}

.pricing-note h4 svg {
  width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 2;
}

.pricing-note p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .pricing-grid  { grid-template-columns: 1fr; max-width: 420px; }
  .pricing-notes { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 480px) {
  .pricing-hero h2 { font-size: 22px; }
}