/* ============================================================================
   pricing.css — "/pricing".

   Source of truth: apps/editor/src/pages/PricingPage.tsx. Each rule is the
   resolved value of the Tailwind class list quoted above it; inline
   `style={{…}}` values are reproduced as-is.
   ========================================================================= */

/* ═══ Hero ═════════════════════════════════════════════════════════════════ */

/* "relative pt-40 pb-16 text-center px-6 overflow-hidden" */
.pricing-hero {
  position: relative;
  padding: 10rem 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
}
/* "relative max-w-2xl mx-auto" */
.pricing-hero__inner {
  position: relative;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
/* "text-5xl md:text-6xl font-black text-slate-900 dark:text-white
    tracking-tight mb-5" + lineHeight 1.05, letterSpacing -0.03em */
.pricing-hero__title {
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.mk-dark .pricing-hero__title { color: #fff; }
@media (min-width: 768px) { .pricing-hero__title { font-size: 3.75rem; } }
/* "text-lg text-[#000000] dark:text-slate-400 max-w-md mx-auto" */
.pricing-hero__lede {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #000;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .pricing-hero__lede { color: #94a3b8; }

/* ═══ Plans ════════════════════════════════════════════════════════════════ */

/* "max-w-5xl mx-auto px-6 pb-20" */
.plans {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 5rem;
}
/* "grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch" */
.plans__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 768px) { .plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* GlowCard + "rounded-2xl p-8 h-full flex flex-col relative overflow-hidden"
   with background and border set inline. The highlight is restrained on
   purpose: a firmer border and a faint tint, not an animated frame — the plan
   should read premium, not loud. */
.plan {
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--mk-card-grad);
  border: 1px solid var(--mk-divider);
}
.plan--highlight {
  background: var(--mk-card-grad-hi);
  border: 1px solid rgba(99, 102, 241, 0.45);
}
/* "absolute top-5 right-5 text-[10px] font-bold px-2.5 py-1 rounded-full
    text-indigo-700 dark:text-indigo-300 border border-indigo-400/30"
   + background rgba(99,102,241,0.14) */
.plan__badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 10px;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  color: #4338ca;
  border: 1px solid rgba(129, 140, 248, 0.3);
  background: rgba(99, 102, 241, 0.14);
}
.mk-dark .plan__badge { color: #a5b4fc; }
/* "mb-7" */
.plan__head { margin-bottom: 1.75rem; }
/* "text-sm font-semibold text-[#444444] dark:text-slate-400 mb-3" */
.plan__name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 0.75rem;
}
.mk-dark .plan__name { color: #94a3b8; }
/* "flex items-baseline gap-2 mb-3" */
.plan__pricing { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
/* "text-5xl font-black text-slate-900 dark:text-white" — a price that does not
   start with "$" (the Team plan's "Coming soon") uses text-3xl instead. */
.plan__price { font-size: 3rem; line-height: 1; font-weight: 900; color: #0f172a; }
.plan__price--words { font-size: 1.875rem; line-height: 2.25rem; }
.mk-dark .plan__price { color: #fff; }
/* "text-xs text-slate-500" */
.plan__period { font-size: 0.75rem; line-height: 1rem; color: #64748b; }
/* "text-sm text-[#444444] dark:text-slate-400 leading-relaxed" */
.plan__desc { font-size: 0.875rem; color: #444; line-height: 1.625; }
.mk-dark .plan__desc { color: #94a3b8; }
/* "flex-1 flex flex-col gap-3.5 mb-8" */
.plan__features {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2rem;
}
/* "flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300" */
.plan__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #334155;
}
.mk-dark .plan__feature { color: #cbd5e1; }
/* GradientButton + "w-full !py-3.5" — the base button keeps its px-5 and
   text-sm; only the width and the vertical padding change. */
.plan__cta--primary { width: 100%; padding-top: 0.875rem; padding-bottom: 0.875rem; }
/* Secondary plan CTA. (A light-conversion sweep once turned this button's
   #e2e8f0 TEXT colour into var(--mk-divider) — invisible text in both themes.
   Theme-aware rules, no inline colours.)
   "w-full py-3.5 rounded-xl font-bold text-sm transition-all bg-slate-100
    hover:bg-slate-200 text-slate-700 border border-slate-200 dark:bg-white/5
    dark:hover:bg-white/10 dark:text-slate-200 dark:border-white/10" */
.plan__cta--secondary {
  display: block;
  width: 100%;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  font-family: inherit;
}
.plan__cta--secondary:hover { background: #e2e8f0; }
.mk-dark .plan__cta--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.1);
}
.mk-dark .plan__cta--secondary:hover { background: rgba(255, 255, 255, 0.1); }

/* "mt-10 text-center" + "text-sm text-slate-500 dark:text-slate-600 max-w-2xl mx-auto" */
.plans__note { margin-top: 2.5rem; text-align: center; }
.plans__note p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #64748b;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .plans__note p { color: #475569; }

/* ═══ Comparison + FAQ bands ═══════════════════════════════════════════════ */

/* "border-t border-slate-200/70 dark:border-white/5 py-24" */
.pricing-band {
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.mk-dark .pricing-band { border-top-color: rgba(255, 255, 255, 0.05); }
.pricing-band--alt { background: var(--mk-bg-alt); }
.pricing-band--bg { background: var(--mk-bg); }

.pricing-band__head { text-align: center; margin-bottom: 3rem; }
/* "text-4xl font-black text-slate-900 dark:text-white tracking-tight mb-3"
   + letterSpacing -0.03em */
.pricing-band__title {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.mk-dark .pricing-band__title { color: #fff; }
/* "text-[#000000] dark:text-slate-400 text-sm" */
.pricing-band__sub { color: #000; font-size: 0.875rem; line-height: 1.25rem; }
.mk-dark .pricing-band__sub { color: #94a3b8; }

/* ═══ Comparison table ═════════════════════════════════════════════════════ */

/* "rounded-2xl border border-slate-200 dark:border-white/8 overflow-hidden"
   + background var(--mk-tile). `dark:border-white/8` generates no rule (8 is
   off Tailwind's opacity scale), so the slate-200 border stays in dark mode —
   see migration/PROJECT.md, "Reproduced quirks". */
.compare {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: var(--mk-tile);
}
/* "grid grid-cols-[1.6fr_1fr_1fr] text-xs font-semibold uppercase
    tracking-wider text-[#444444] dark:text-slate-400 border-b
    border-slate-200 dark:border-white/8" + background var(--mk-tile) */
.compare__head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #444;
  border-bottom: 1px solid #e2e8f0;
  background: var(--mk-tile);
}
.mk-dark .compare__head { color: #94a3b8; }
/* "px-5 py-4" */
.compare__head > div { padding: 1rem 1.25rem; }
.compare__head > div:nth-child(2) { text-align: center; }
/* "px-5 py-4 text-center text-indigo-600 dark:text-indigo-400"
   + background rgba(99,102,241,0.08) */
.compare__head > div:nth-child(3) {
  text-align: center;
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.08);
}
.mk-dark .compare__head > div:nth-child(3) { color: #818cf8; }
/* "grid grid-cols-[1.6fr_1fr_1fr] text-sm items-center" + a hardcoded
   1px #f8fafc top border on every row except the first (inline style in the
   original, so it does NOT change with the theme). */
.compare__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  font-size: 0.875rem;
  line-height: 1.25rem;
  align-items: center;
  border-top: 1px solid #f8fafc;
}
/* `:first-of-type` would match .compare__head — it is the first div child —
   and never a row, leaving all ten rows bordered and the page 1px tall. */
.compare__head + .compare__row { border-top: none; }
/* "px-5 py-3.5 text-slate-700 dark:text-slate-300" */
.compare__feature { padding: 0.875rem 1.25rem; color: #334155; }
.mk-dark .compare__feature { color: #cbd5e1; }
/* "px-5 py-3.5 flex justify-center text-[#444444] dark:text-slate-400 text-[13px]" */
.compare__free {
  padding: 0.875rem 1.25rem;
  display: flex;
  justify-content: center;
  color: #444;
  font-size: 13px;
}
.mk-dark .compare__free { color: #94a3b8; }
/* "px-5 py-3.5 flex justify-center text-slate-800 dark:text-slate-200
    text-[13px] font-medium h-full items-center" + background rgba(99,102,241,0.06) */
.compare__pro {
  padding: 0.875rem 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.06);
}
.mk-dark .compare__pro { color: #e2e8f0; }

/* ═══ FAQ band ═════════════════════════════════════════════════════════════ */

/* "max-w-3xl mx-auto px-6" / "max-w-2xl mx-auto px-6" */
.wrap-3xl-px { max-width: 48rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap-2xl-px { max-width: 42rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* "flex flex-col gap-2.5" */
.pricing-faq__list { display: flex; flex-direction: column; gap: 0.625rem; }
/* "text-center mt-14" + "text-xs text-slate-500 dark:text-slate-600 mt-4" */
.pricing-faq__cta { text-align: center; margin-top: 3.5rem; }
.pricing-faq__note { font-size: 0.75rem; line-height: 1rem; color: #64748b; margin-top: 1rem; }
.mk-dark .pricing-faq__note { color: #475569; }

/* Check mark used in the plan feature lists and the comparison table.
   "flex-shrink-0" on a 15x15 SVG drawn from a 14x14 viewBox. */
.check-icon { flex-shrink: 0; }