/* ============================================================
   pricing.css — PRICING page-specific section styles.
   Shared chrome (nav, footer, buttons, tokens, type, .serif-title,
   .caption, .dot, light-header variant) lives in /site.css.
   ============================================================ */

/* .page-hero and .banner are shared in site.css (used by Pricing + Contact). */

/* ---- FEES ---- */
.fees { padding: 92px 0 104px; }
.fees-lead {
  font-size: 16px; line-height: 24px; color: var(--ink-soft);
  margin-bottom: 56px; max-width: 760px;
}
.fees-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 64px; row-gap: 64px;
}
.fee-block { }
.fee-block h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 4px;
}
.fee-block .fee-sub {
  font-size: 13px; line-height: 18px; color: var(--cap); margin-bottom: 20px;
}
.fee-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  font-size: 15px; line-height: 22px; color: var(--ink-soft);
  padding: 7px 0;
}
.fee-row .fee-name { max-width: 78%; }
.fee-row .fee-val { white-space: nowrap; flex: none; }
.fee-note {
  margin-top: 16px;
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .page-hero { padding-top: 124px; }
  .fees-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 48px; }
}
@media (max-width: 560px) {
  .fees-grid { grid-template-columns: 1fr; }
}