@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────
   Pricing page — /pricing

   Built entirely from the site's existing tokens and the .glass / .card / .btn
   primitives in styles.css, so it cannot drift from the brand. Only /pricing
   loads this file.
   ───────────────────────────────────────────────────────────────────────── */

/* The nav is fixed at top:18px, so a plain .section would start under it. Same
   top-padding trick the legal pages use, minus the room a hero image needs. */
.pricing-page { padding-top: clamp(7rem, 12vw, 9rem); }

/* ── Header ────────────────────────────────────────────────────────────── */
.pricing-hero { max-width: 44rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.pricing-hero h1 {
  font-size: var(--fs-h2); line-height: 1.02; margin-top: var(--sp-4);
}
.pricing-hero .lead { margin: 1.25rem auto 0; max-width: 34rem; }

/* The trial promise, in the same green pill vocabulary as the hero badge. */
.trial-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.75rem;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(141, 240, 106, .28);
  background: rgba(141, 240, 106, .08);
  font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green);
}
.trial-pill svg { width: 15px; height: 15px; }

/* ── Plan grid ─────────────────────────────────────────────────────────── */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  max-width: 62rem; margin: 0 auto;
  align-items: stretch;
}
/* One column early enough that three cards never crush their price row. */
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; max-width: 26rem; } }

.plan { display: flex; flex-direction: column; text-align: left; }
.plan__head { min-height: 3.4rem; }
.plan__name { font-size: 1.375rem; letter-spacing: -.02em; }
.plan__tag { margin-top: .35rem; color: var(--ink-muted); font-size: .875rem; }

.plan__price {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 3.25rem); line-height: 1;
  letter-spacing: -.04em; color: var(--ink);
  margin: 1.35rem 0 0; display: flex; align-items: baseline; gap: .15rem;
  font-variant-numeric: tabular-nums;
}
.plan__cur { font-size: .5em; font-weight: 700; transform: translateY(-.55em); }
.plan__per { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; margin-left: .1rem; }
.plan__sub { margin-top: .65rem; color: var(--ink-60); font-size: .9rem; min-height: 2.6rem; }

/* CTA pinned to the bottom so all three cards line up regardless of copy. */
.plan__cta { margin-top: auto; width: 100%; }

/* Featured plan: a green ring + soft glow rather than a transform, so the
   .card:hover lift still reads and nothing fights over `transform`. */
.plan--featured {
  border: 1px solid rgba(141, 240, 106, .35);
  box-shadow: var(--glass-sheen), var(--glass-inner), var(--glass-drop),
              0 0 0 1px rgba(141, 240, 106, .22), var(--glow-green);
}
.plan__badge {
  position: absolute; top: 1rem; right: 1rem;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--grad-green); color: var(--bg-base);
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}

/* ── Billing note under the grid ───────────────────────────────────────── */
.pricing-note {
  max-width: 46rem; margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center; color: var(--ink-muted); font-size: .9rem; line-height: 1.7;
}
.pricing-note a { color: var(--green); text-underline-offset: .18em; }

/* ── "Everything included" ─────────────────────────────────────────────── */
.incl-head { text-align: center; margin: clamp(4rem, 8vw, 6rem) auto clamp(1.75rem, 4vw, 2.5rem); }
.incl-head h2 { font-size: var(--fs-h3); }
.incl-head p { margin-top: .9rem; color: var(--ink-60); }
.incl {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .85rem 2.5rem; max-width: 46rem; margin: 0 auto;
}
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; } }
.incl li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-70); font-size: .95rem; }
.incl__tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  background: rgba(141, 240, 106, .14); color: var(--green);
}
.incl__tick svg { width: 12px; height: 12px; }

/* ── Pricing FAQ reuses the .faq system from styles.css ────────────────── */
.pricing-faq { margin-top: clamp(4rem, 8vw, 6rem); }
.pricing-faq .section-head { margin-bottom: clamp(2rem, 4vw, 2.75rem); }