.member-fees {
  --fees-space: 1.5rem;
  --fees-heading: clamp(2rem, 3vw, 2.75rem);
  --fees-price: clamp(3rem, 5vw, 4.5rem);
  --fees-label: clamp(.875rem, .85rem + .1vw, 1rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.member-fees .fees-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.member-fees h2 {font-size: var(--fees-heading); margin-bottom: var(--fees-space)}
.member-fees .fees-copy p {max-width: 65ch; color: var(--muted)}
.member-fees .fees-copy p + p {margin-top: 1rem}
.member-fees .fees-copy strong {color: var(--ink)}
.member-fees .fees-actions {display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--fees-space)}
.member-fees .fees-actions .btn {justify-content: center; text-align: center; min-height: 2.75rem}
.member-fees .fees-rate {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--green);
  color: var(--surface);
}
.member-fees .fees-rate-label {font-size: var(--fees-label); font-weight: 700}
.member-fees .fees-price {font-family: Zodiak, Georgia, serif; font-size: var(--fees-price); line-height: 1.2; margin-block: .5rem}
.member-fees .fees-price span {font-family: Satoshi, system-ui, sans-serif; font-size: var(--fees-label); white-space: nowrap}
.member-fees .fees-policy {border-top: 1px solid rgb(255 255 255 / .25); padding-top: 1rem; margin-top: 1rem; font-weight: 700}
@media (max-width: 760px) {
  .member-fees .fees-layout {grid-template-columns: minmax(0, 1fr)}
  .member-fees .fees-actions .btn {width: 100%}
}