/* /plans: legal reference page for weekly plan limits, linked from the paywall, Terms and
   purchase confirmation. Same purpose.app look as /meta/vs-chatgpt (EB Garamond + Plus Jakarta
   Sans from /kit/assets, parchment canvas, white cards). No CTAs or tracking.
   Everything is scoped to body.plans-page. */

.plans-page {
  --bg: #f8f4ee; --white: #fefefe; --line: #ebe3da; --ink: #171830; --muted: #746f6b;
  --purple-deep: #4347a5; --purple-tint: #eeeef9;
  --serif: "EB Garamond", Georgia, serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
.plans-page *, .plans-page *::before, .plans-page *::after { box-sizing: border-box; }
.plans-page img { max-width: 100%; display: block; }
.plans-page h1, .plans-page h2, .plans-page h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); text-wrap: balance; }
.plans-page p, .plans-page li { text-wrap: pretty; }

/* Nav */
.plans-page .nav { background: var(--bg); }
.plans-page .nav-inner { max-width: 720px; margin: 0 auto; height: 64px; padding: 0 20px; display: flex; align-items: center; }
.plans-page .nav .logo { width: 116px; height: auto; }

/* Document */
.plans-page .doc { max-width: 720px; margin: 0 auto; padding: 24px 20px 80px; }
.plans-page h1 { font-size: 40px; line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 10px; }
.plans-page .updated { color: var(--muted); font-size: 14px; margin: 0 0 32px; }
.plans-page .intro { font-size: 18px; color: var(--muted); margin: 0 0 28px; }

/* Plan cards */
.plans-page .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 48px; }
.plans-page .plan { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.plans-page .plan h2 { font-size: 30px; line-height: 1.1; margin: 0 0 2px; }
.plans-page .plan .per { color: var(--muted); font: 600 13px/1.4 var(--sans); margin: 0 0 16px; }
.plans-page .limit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.plans-page .limit span { color: var(--muted); font-size: 15px; }
.plans-page .limit strong { font: 600 22px/1.2 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* How limits work */
.plans-page h3 { font-size: 30px; line-height: 1.1; margin: 0 0 16px; }
.plans-page .how { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.plans-page .how li { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 16px 20px; }
.plans-page .how b { display: block; font-weight: 600; margin-bottom: 2px; }
.plans-page .how p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.plans-page .note { margin: 32px 0 0; padding: 16px 20px; border-radius: 22px; background: var(--purple-tint); font-size: 14px; color: var(--ink); }

@media (min-width: 768px) {
  .plans-page .doc { padding-top: 48px; }
  .plans-page h1 { font-size: 52px; }
}