/* ============================================================================
   plans-content.css — shared styling for the plans content (cards + features).
   Used by BOTH the marketing pricing page (pricing.html) and the in-app plans
   overlay, so the two never drift. Only the chrome (nav/footer vs bare Close)
   and the CTA action differ; everything here is identical on both surfaces.
   ========================================================================== */
.plans-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
/* 0.1.444: sized from the owner's Figma reference (node 124:5): Prata Regular 40px,
   line-height 57.2px. WEIGHT was already identical and could not have differed --
   both this and .hp-hero h1 are Prata at 400, and Prata ships Regular only. The one
   property that actually differed from the homepage header was TRACKING, so the
   homepage h1's -.3px is applied here too. */
.plans-title { font-family: var(--font-display); font-weight: 400; font-size: 40px; color: var(--ink); line-height: 1.43; letter-spacing: -.3px; margin: 0; }
.plans-sub { font-size: 17px; color: var(--ink2); line-height: 1.6; margin-top: 14px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
/* 0.1.443: border removed on all three cards. They are white cards on the warm
   canvas, separated by shadow alone. The featured card no longer takes a burgundy
   stroke either - the mustard tag is what marks it now. */
.price-card { background: var(--white); border: 0; border-radius: var(--radius-card); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.price-card.featured { box-shadow: var(--shadow-md); position: relative; }
.price-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--mustard); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); }
/* 0.1.443: was var(--font-display) (Prata). Target has uniform 2px stems at 24px,
   i.e. sans regular; only the price numerals stay serif. */
.price-name { font-family: var(--font-body); font-size: 24px; color: var(--ink); }
.price-amount { display: flex; align-items: baseline; gap: 3px; margin: 16px 0 4px; }
/* Figma 124:26 has the currency mark in IBM Plex Sans Regular, not Prata. Only the
   numeral itself is display type. */
.price-amount .cur { font-family: var(--font-body); font-size: 26px; color: var(--ink); }
.price-amount .amt { font-family: var(--font-display); font-size: 52px; color: var(--ink); line-height: 1; letter-spacing: -.3px; }
.price-amount .per { font-size: 15px; color: var(--muted); }
.price-credits { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 12px; }
.price-flows { font-size: 14px; color: var(--muted); margin-top: 2px; }
.price-cta { margin-top: 28px; }

.plans-include { max-width: 780px; margin: 56px auto 0; text-align: center; }
/* 0.1.443: was a 12px uppercase letterspaced muted eyebrow. The target reads as
   sentence case (descenders present on "Every plan"), ~20px, in --ink, with mild
   stroke contrast -> Prata. */
.plans-include-h { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 36px; }
.plans-include-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 34px; text-align: left; }
.plans-include-grid li { display: flex; gap: 12px; align-items: flex-start; }
.plans-include-grid li > svg { width: 22px; height: 22px; color: var(--burgundy); flex: none; margin-top: 1px; }
.pf-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.pf-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

.plans-note { text-align: center; font-size: 13px; color: var(--muted); margin: 44px auto 0; max-width: 560px; line-height: 1.6; }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
  .plans-include-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

/* Card CTA buttons — dedicated classes so they render identically on both
   surfaces without colliding with the app's own .btn (teal) in styles.css. */
.plan-btn { width: 100%; height: 44px; font-size: 14px; font-weight: 600; font-family: var(--font-body); border-radius: var(--radius-btn); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent; text-decoration: none; box-sizing: border-box; transition: background .15s ease, border-color .15s ease, color .15s ease; -webkit-font-smoothing: antialiased; }
.plan-btn:disabled { opacity: .45; cursor: default; }
.plan-btn-primary { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.plan-btn-primary:hover:not(:disabled) { background: var(--burgundy-hover); border-color: var(--burgundy-hover); }
.plan-btn-secondary { background: var(--white); color: var(--burgundy); border-color: var(--burgundy); }
.plan-btn-secondary:hover:not(:disabled) { background: rgba(97,26,30,.05); }