/* ============================================================
   Leafy — pricing
   ============================================================
   Built entirely from the two devices the homepage already uses:
   the bare three-across columns of .step-grid, and the hairline
   key/value rows of .spec-list. No cards, no badges, no vertical
   rules, no new colors. The plans are three spec-lists standing
   side by side, and subgrid keeps their rows on shared baselines
   so the three prices read as one line of type across the page.

   Shared by pricing.html and the homepage's pricing section.
   ============================================================ */

/* ── Page header (pricing.html only) ───────────────────────── */

/* Two columns, like the homepage hero: the word on the left, the
   explanation on the right, so the fold is never half empty. */
.pricing-head {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 44px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}
.pricing-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.pricing-head .section-lead { margin: 0; max-width: 46ch; }

@media (max-width: 760px) {
  .pricing-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pricing-head .section-lead { margin-top: 14px; }
}

/* ── The table ─────────────────────────────────────────────── */

.ptable {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 48px);   /* .step-grid's gap, exactly */
  row-gap: 0;                            /* rows are spaced by the hairlines */
  margin-top: 26px;
  text-align: left;
}

/* Each plan owns its rows, but borrows the table's rows so prices,
   notes, buttons, and every fact line up across all three columns.
   Without subgrid the columns simply size themselves and the page
   still reads correctly, just with looser alignment. */
.pcol {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 8;
  align-content: start;
}
@supports not (grid-template-rows: subgrid) {
  .pcol { grid-row: auto; grid-template-rows: none; }
}

/* The recommended plan is marked the way the homepage marks
   anything: a rule and a label, never a filled box. */
.pcol--pick { position: relative; }
.pcol--pick .pt-flag {
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 12px;
  border-top: 2px solid var(--green);
}
.pt-flag { min-height: 1em; line-height: 1.2; }  /* holds the row open in the other columns */
.pcol:not(.pcol--pick) .pt-flag { border-top: 2px solid transparent; padding-top: 12px; }

.pt-name {
  font-family: var(--font-display);
  font-size: 1.1875rem;               /* .step h3 */
  font-weight: 700;
  margin-top: 14px;
  color: var(--text-primary);
}

/* The signature: three serif numerals sharing one baseline, set at Fraunces'
   display optical size where it goes thin and high contrast. The fat accented
   numeral it replaces is the single most recognisable tell of a stock pricing
   table, and it was fighting the section heading, which is the same face at
   the opposite end of the same axis. */
.pt-price {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.pt-amount {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.6vw, 3.25rem);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-primary);
}
.pt-per {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
}
/* The full price, struck, ahead of the one the early list pays. "Half price"
   as a sentence is a claim; two numerals next to each other is arithmetic the
   reader does themselves, which is why it lands harder. Set in the same serif
   as the live price so they read as one price being corrected, not as a price
   and a footnote. */
.pt-was {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.pt-note {
  margin-top: 10px;
  font-size: 1.0625rem;               /* .step p */
  line-height: 1.5;
  color: var(--text-body);
  max-width: 26ch;
  text-wrap: balance;
}

.pt-cta { margin-top: 22px; padding-bottom: 8px; }
.pt-cta button.dl-btn { cursor: pointer; }
/* The buttons say "lock in half price" because that is what they do: nothing is
   for sale yet and they scroll to the Discord invite. Saying "start monthly"
   and landing on an invite is the kind of small lie a visitor only has to
   catch once. This line keeps the price itself from reading as a live offer. */
.pt-cta-note {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* Monthly is a real option, but the page leans lifetime, so it gets
   the same pill drawn empty: identical size, outline instead of fill,
   so one green button carries the page rather than two.
   `.plain .dl-btn` sets border:none, hence the matching specificity
   and the inset ring, which draws the outline without resizing the
   box the way a real border would. */
.plain .dl-btn--quiet {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1.5px var(--text-secondary);
}
.plain .dl-btn--quiet:hover {
  background: var(--film-weak);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1.5px var(--text-primary);
}
/* Free needs no button at all: the download is one scroll away. */
.pt-link {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--separator);
  padding-bottom: 3px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.pt-link:hover { color: var(--text-primary); border-bottom-color: var(--text-tertiary); }

/* ── Fact rows: .spec-list's hairlines, one column wide ────── */

.pt-fact {
  display: grid;
  gap: 2px;
  padding: 13px 0;
  border-top: 1px solid var(--separator-light);
  align-content: start;
}
.pcol > .pt-fact:last-of-type { border-bottom: 1px solid var(--separator-light); }
.pt-k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pt-v {
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text-body);
  text-wrap: balance;
}
.pt-v b { color: var(--text-primary); font-weight: 700; }
/* The one line in each plan that costs you something. */
.pt-v.is-catch { color: var(--text-secondary); }

.fn-ref {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  padding-left: 1px;
}
.fn-ref:hover { color: var(--green); }

/* ── Everything-included line + footnote ───────────────────── */

.pt-shared {
  margin-top: 30px;
  max-width: 760px;                   /* .spec-list's measure */
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-body);
}
.pt-shared b { color: var(--text-primary); font-weight: 700; }

.pricing-footnote {
  margin-top: 14px;
  max-width: 760px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── The Discord panel (revealed by a buy button) ──────────── */

.waitlist {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 46px var(--gutter) 0;
}
.waitlist[hidden] { display: none; }

.waitlist-inner {
  max-width: 640px;
  border-top: 1px solid var(--separator);
  padding-top: 30px;
}
.waitlist-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.waitlist h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.waitlist h2 em {
  font-style: normal;
  color: var(--green);
}
.waitlist-cta { margin-top: 26px; }
.waitlist-fine {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
/* The app itself, for anyone who lands here first and joins the list without
   ever passing a download link. An outline would put it level with the Discord
   button above it; this is a link with an icon, so it is findable without
   competing. */
.waitlist-get {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--separator-light);
}
.waitlist-dl {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--separator);
  padding-bottom: 3px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.waitlist-dl svg { flex: none; }
.waitlist-dl:hover { color: var(--green); border-bottom-color: currentColor; }
.waitlist-get-note {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ── FAQ ───────────────────────────────────────────────────── */

/* The same hairline key/value rows as the plans table and the
   homepage's "Good to know": question in the left column, answer in
   the right, one rule between each pair. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 48px);
  max-width: 960px;
  margin-top: 28px;
}
.faq dt,
.faq dd {
  padding: 17px 0;
  border-top: 1px solid var(--separator-light);
}
.faq dt {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-primary);
}
.faq dd {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-body);
}
.faq dt:last-of-type,
.faq dd:last-of-type { border-bottom: 1px solid var(--separator-light); }

@media (max-width: 700px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq dt { padding-bottom: 4px; }
  .faq dd { padding-top: 0; border-top: 0; }
  .faq dt:last-of-type { border-bottom: 0; }
}

/* ── Discord button ────────────────────────────────────────── */

/* Discord's own blue, the same #5865f2 the homepage community pills use,
   and the same behaviour: outlined at rest, solid fill on hover, so the
   button holds still and only the colour commits. Sized like .dl-btn
   instead of like a small pill, because on this page it is the action. */
.discord-btn-wrap { display: block; }
.discord-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 30px;
  border: 1.5px solid #5865f2;
  border-radius: 12px;
  background: transparent;
  color: #5865f2;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.discord-btn svg { width: 20px; height: 20px; flex: none; }
.discord-btn:hover {
  background: #5865f2;
  color: #fff;
}
.discord-btn:focus-visible {
  outline: 2px solid #5865f2;
  outline-offset: 3px;
}

.community-cta { margin-top: 24px; }

/* ── Homepage section ──────────────────────────────────────── */

/* On the homepage the table carries only the head rows: name,
   price, one line, and the link out. The facts live on /pricing. */

/* ── Narrow screens ────────────────────────────────────────── */

/* Three serif prices stop fitting well before phone width; two
   columns keep the comparison readable, then one stacks the plans
   into three ordinary spec-lists. */
@media (max-width: 900px) {
  .ptable { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .pcol { grid-row: auto; grid-template-rows: none; }
  .pcol:not(.pcol--pick) .pt-flag,
  .pt-flag:empty { display: none; }
  .pcol--pick { order: -1; }
}
@media (max-width: 600px) {
  .ptable { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .pt-note { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-link, .dl-btn--quiet { transition: none; }
}