/* Membership only. Loaded after site.css. */

/* -------------------------------------------------------------- hero */

.membership-hero__lede {
  max-width: var(--measure-hero);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- benefits */

.benefits__title {
  font-size: 38px;
  line-height: 1.1;
}

/*
 * Full width, against the --measure cap .section__head puts on its paragraphs.
 *
 * That cap is a real typographic rule - 820px is about as long as a line should
 * get before the eye loses its place returning to the left - so this is a
 * deliberate exception for one section rather than something to copy. The
 * selector has to include .section__head to out-specify it.
 */
.section__head > .benefits__lede {
  max-width: none;
}

.benefits__lede {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: pretty;
}

.benefits__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
  gap: 24px;
}

.benefit {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 32px;
}

.benefit__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-800);
}

.benefit__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .benefits__title {
    font-size: 30px;
  }

  .benefits__lede {
    font-size: 17px;
  }
}

/* -------------------------------------------------------------- band */

.membership-band {
  display: grid;
  justify-items: center;
  text-align: center;
}

/* The head block is a grid item of the centered band, so it shrink-wraps to its
 * widest child - the heading. Its children have to be centered inside it too, or
 * the lede, held to the 820px measure by .section__head, sits left of a heading
 * that is wider than that. */
.membership-band .section__head {
  justify-items: center;
}

/* The heading is centred here, so its rule has to be too. The shared .h2 rule
   sits at the heading's own left edge, which under centred text reads as
   misaligned rather than as an underline. */
.membership-band__title::after {
  margin-inline: auto;
}

.membership-band__title {
  font-size: 38px;
}

/*
 * Everything in this band is full white now.
 *
 * It was written for a navy band, where translucent white and gold both had
 * room: 82% white measured 7.7:1 and --gold-500 6.9:1. The band is TPN blue,
 * which is much lighter, and the same values fell to 3.62:1 and 2.19:1. Nine
 * elements here failed AA on the switch, none of them visibly broken, all of
 * them unreadable to anyone who needed the contrast.
 *
 * White is 4.60:1 on this blue, which is the ceiling, so there is no headroom
 * to spend on a tint. Hierarchy is carried by size and weight instead.
 */
.membership-band__lede {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.55;
  color: #fff;
  text-wrap: pretty;
}

/* --------------------------------------------------- partners panel */

/* Sits inside the centered band. `inline-grid` so the panel is only as wide as
 * its two cells, with the middle 1px column drawn as the divider. */
.partners {
  display: inline-grid;
  grid-template-columns: auto 1px auto;
  align-items: center;
  gap: 32px;
  padding: 28px 34px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  text-align: left;
}

.partners__stat {
  display: grid;
  gap: 8px;
}

.partners__value {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.partners__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.partners__note {
  font-size: 14px;
  color: #fff;
}

/* `align-self: stretch` overrides the grid's `align-items: center` so the
 * hairline runs the full height of the row rather than collapsing. */
.partners__divider {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.14);
}

.partners__list {
  list-style: none;
  display: grid;
  gap: 12px;
}

.partners__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #fff;
}

/* Gold measured 2.19:1 here, under even the 3:1 that non-text needs. */
.partners__icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: #fff;
}

@media (max-width: 700px) {
  .partners {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px 24px;
  }

  .partners__divider {
    display: none;
  }
}

@media (max-width: 640px) {
  .membership-band__title {
    font-size: 28px;
  }

  .membership-band__lede {
    font-size: 17px;
  }
}

/* -------------------------------------------------------------- fees */

.fees {
  display: grid;
  gap: 32px;
}

.fees__title {
  font-size: 38px;
}

/* The panel scrolls rather than the table squashing: below 520px the three
 * columns cannot hold their numbers on one line. */
.fees__panel {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fees__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}

.fees__table th {
  padding: 16px 24px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey-600);
  text-align: left;
}

.fees__table td {
  padding: 15px 24px;
}

.fees__table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-micro) ease;
}

.fees__table tbody tr:hover {
  background: var(--grey-100);
}

.fees__level {
  width: 1%;
  white-space: nowrap;
  color: var(--text-secondary);
}

.fees__revenue {
  color: var(--text-body);
}

.fees__table .fees__fee {
  text-align: right;
}

.fees__table td.fees__fee {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy-800);
}

@media (max-width: 640px) {
  .fees__title {
    font-size: 28px;
  }
}

/* ------------------------------------------------------- where to next */