.membership-hero {
  min-height: 468px;
  padding-block: 140px 120px;
  background: var(--color-canvas);
}

.membership-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.membership-hero__eyebrow,
.membership-who__eyebrow {
  color: var(--color-warm-grey);
  font-optical-sizing: none;
  font-variation-settings: "wght" 500, "opsz" 24;
}

.membership-hero__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.membership-hero__intro {
  max-width: 780px;
  color: var(--color-warm-grey);
  font-optical-sizing: none;
  font-variation-settings: "wght" 400, "opsz" 15;
}

.membership-hero__intro--mobile,
.membership-who__tier-copy--mobile {
  display: none;
}

.membership-who {
  padding-block: 120px;
  background: #f2f0ea;
}

.membership-who__eyebrow {
  padding-block-end: 48px;
  font-family: var(--font-body);
  font-weight: 500;
}

.membership-who__tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.membership-who__tier {
  min-width: 0;
  min-height: 209px;
  padding: 47px 43px 39px;
  border: 1px solid #dcd8d0;
  border-radius: 20px;
  background: var(--color-surface);
}

.membership-who__tier-title {
  font-size: var(--font-size-heading-7);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.membership-who__tier-copy {
  margin-block-start: 18px;
  color: var(--color-warm-grey);
  font-size: var(--font-size-body-lg);
  font-weight: 400;
  line-height: 1.7;
}

.membership-benefits {
  padding-block: 130px 120px;
  background: var(--color-canvas);
}

.membership-benefits__head,
.membership-apply__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.membership-benefits__head { padding-block-end: 52px; }
.membership-apply__head { padding-block-end: 56px; }

.membership-benefits__eyebrow,
.membership-apply__eyebrow {
  color: var(--color-warm-grey);
  font-optical-sizing: none;
  font-variation-settings: "wght" 500, "opsz" 24;
}

.membership-benefits__title,
.membership-apply__title {
  font-size: var(--font-size-heading-4);
  line-height: var(--line-height-heading-medium);
  letter-spacing: var(--tracking-heading);
}

.membership-benefits__title { max-width: 691px; text-wrap: wrap; }

.membership-benefits__title em,
.membership-apply__title em {
  color: var(--color-accent);
  font-weight: inherit;
}

.membership-benefits__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.membership-benefits__card {
  display: flex;
  min-width: 0;
  min-height: 158px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 37px 31px 34px;
  border: 1px solid #dcd8d0;
  border-radius: 20px;
  background: var(--color-surface);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}

.membership-benefits__tick {
  display: block;
  width: 20px;
  height: 1px;
  flex: none;
  background: var(--color-accent);
  transform-origin: center;
  transition: transform 140ms ease-out;
}

.membership-benefits__card-title {
  font-size: var(--font-size-heading-10);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-heading);
}

.membership-benefits__card-copy {
  color: var(--color-warm-grey);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  font-optical-sizing: none;
  font-variation-settings: "wght" 500, "opsz" 15;
}

.membership-benefits__rows { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .membership-benefits__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgb(0 33 20 / 8%);
  }

  .membership-benefits__card:hover .membership-benefits__tick { transform: scaleX(1.08); }
}

.membership-apply {
  padding-block: 130px;
  background: #f2f0ea;
}

.membership-apply__steps--desktop {
  position: relative;
  display: grid;
  height: 187px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.membership-apply__connector {
  position: absolute;
  top: 31px;
  left: 38px;
  width: calc(66.666% - 10px);
  height: 1px;
  background: #dcd8d0;
  opacity: 0;
  transform-origin: left;
}

.membership-apply__step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-inline-end: 24px;
}

.membership-apply__number {
  position: relative;
  display: block;
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: var(--font-weight-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  opacity: .18;
}

.membership-apply__step-title {
  font-size: var(--font-size-heading-8);
  line-height: var(--line-height-heading-wide);
  letter-spacing: var(--tracking-heading);
}

.membership-apply__step-title a { color: inherit; }
.membership-apply__step-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.membership-apply__step-title a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.membership-apply__step-copy {
  color: var(--color-warm-grey);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  font-optical-sizing: none;
  font-variation-settings: "wght" 500, "opsz" 15;
}

.membership-apply__steps--mobile,
.membership-apply__cta { display: none; }

.membership-cta {
  min-height: 482px;
  padding-block: 140px;
  background: var(--color-accent);
}

.membership-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-shell-medium);
  text-align: center;
}

.membership-cta__title {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 66px;
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading-compact);
  letter-spacing: var(--tracking-heading-large);
}

.membership-cta__title em {
  color: var(--color-cta-accent);
  font-weight: inherit;
}

.membership-cta__copy {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--color-cta-muted);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
}

.membership-cta__action { min-width: 196px; }

@media (min-width: 1367px) {
  .membership-cta__title { line-height: 1.106061; letter-spacing: -.013636em; }
  .membership-cta__copy {
    font-optical-sizing: none;
    font-variation-settings: "wght" 400, "opsz" 14;
    /* Figma's rounded 31px box does not survive Chrome's unitless 18px quantization. */
    line-height: 31px;
  }
}

@media (max-width: 1366px) {
  .membership-hero { min-height: 0; padding-block: 112px 96px; }
  .membership-who { padding-block: 96px; }
  .membership-benefits { padding-block: 112px 96px; }
  .membership-apply { padding-block: 112px; }
  .membership-apply__steps--desktop { height: auto; }
  .membership-cta { min-height: 0; padding-block: 112px; }
  .membership-cta__title { font-size: var(--font-size-heading-2); }
}

@media (max-width: 900px) {
  .membership-hero { padding-block: 96px 80px; }
  .membership-hero__inner { gap: 24px; }
  .membership-who { padding-block: 80px; }
  .membership-who__tier { padding: 30px; }
  .membership-benefits { padding-block: 96px 80px; }
  .membership-benefits__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership-apply { padding-block: 96px; }
  .membership-apply__step { padding-inline-end: 0; }
  .membership-cta { padding-block: 96px; }
}

@media (max-width: 760px) {
  .membership-hero { padding-block: 80px 72px; }
  .membership-hero__inner { gap: 22px; }
  .membership-who { padding-block: 72px; }
  .membership-who__tiers { grid-template-columns: 1fr; gap: 16px; }
  .membership-who__tier { min-height: 0; }
  .membership-benefits,
  .membership-apply { padding-block: 72px; }
  .membership-benefits__cards,
  .membership-apply__steps--desktop { display: none; }
  .membership-apply__steps--mobile { display: block; }
  .membership-benefits__rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-block: 1px solid #dcd8d0;
    background: #dcd8d0;
  }
  .membership-benefits__row {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 14px;
    padding-block: 20px 19px;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
  }
  .membership-benefits__row .membership-benefits__tick { width: 14px; }
  .membership-apply__steps--mobile { display: flex; flex-direction: column; gap: 28px; }
  .membership-apply__steps--mobile .membership-apply__step {
    min-height: 40px;
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .membership-apply__steps--mobile .membership-apply__number { width: 23px; flex: none; font-size: 40px; opacity: .2; }
  .membership-apply__steps--mobile .membership-apply__step-title { font-size: var(--font-size-heading-7); line-height: 1.24; }
  .membership-apply__cta { display: inline-flex; width: 100%; margin-block-start: 40px; font-size: var(--font-size-inline-link); }
  .membership-cta__copy { font-size: var(--font-size-body); }
}

@media (max-width: 480px) {
  .membership-hero { min-height: 316px; padding-block: 72px 60px; }
  .membership-hero__inner,
  .membership-who__inner,
  .membership-benefits__inner,
  .membership-apply__inner { width: calc(100% - 48px); }
  .membership-hero__inner { gap: 20px; }
  .membership-hero__eyebrow,
  .membership-who__eyebrow { font-size: var(--font-size-section-meta); letter-spacing: .18em; }
  .membership-hero__title { font-size: var(--font-size-page-title-compact); line-height: 1.08; }
  .membership-hero__intro--desktop,
  .membership-who__tier-copy--desktop { display: none; }
  .membership-hero__intro--mobile { display: block; font-size: var(--font-size-body); line-height: 1.72; }
  .membership-who { padding-block: 64px; }
  .membership-who__eyebrow { padding-block-end: 42px; }
  .membership-who__tiers { gap: 14px; }
  .membership-who__tier { min-height: 120px; padding: 27px 25px 26px; border-radius: 18px; }
  .membership-who__tier-title { font-size: var(--font-size-h5); line-height: 1.16; }
  .membership-who__tier-copy { margin-block-start: 10px; font-size: var(--font-size-supporting-text); }
  .membership-who__tier-copy--mobile { display: block; }
  .membership-benefits,
  .membership-apply { padding-block: 64px; }
  .membership-benefits__head,
  .membership-apply__head { gap: 14px; }
  .membership-benefits__head { padding-block-end: 28px; }
  .membership-apply__head { padding-block-end: 32px; }
  .membership-benefits__head { min-height: 124px; }
  .membership-apply__head { min-height: 93px; }
  .membership-benefits__eyebrow,
  .membership-apply__eyebrow { font-size: var(--font-size-section-meta); letter-spacing: .18em; }
  .membership-benefits__title,
  .membership-apply__title { font-size: var(--font-size-h3); line-height: 1.16; }
  .membership-cta__inner { width: calc(100% - 48px); gap: var(--gap-shell-regular); }
  .membership-cta__copy { font-size: var(--font-size-body-compact); line-height: var(--line-height-body-copy); }
  .membership-cta__action { width: 100%; }
}

@media (max-width: 360px) {
  .membership-hero__title { font-size: var(--font-size-heading-mobile); }
  .membership-hero__inner { gap: 18px; }
}

@media (max-width: 1366px) and (max-height: 650px) {
  .membership-hero { padding-block: 64px 56px; }
  .membership-who { padding-block: 64px; }
}

html.apl-membership-motion-boot:not(.apl-membership-restored) .membership-hero__eyebrow,
html.apl-membership-motion-boot:not(.apl-membership-restored) .membership-hero__title,
html.apl-membership-motion-boot:not(.apl-membership-restored) .membership-hero__intro,
html.apl-membership-motion-boot:not(.apl-membership-who-restored) .membership-who { visibility: hidden; }

@media (min-width: 761px) {
  html.apl-membership-sections-boot:not(.apl-membership-benefits-restored) .membership-benefits__card,
  html.apl-membership-sections-boot:not(.apl-membership-apply-restored) .membership-apply__number { visibility: hidden; }
}

@media (max-width: 760px) {
  html.apl-membership-sections-boot:not(.apl-membership-benefits-restored) .membership-benefits,
  html.apl-membership-sections-boot:not(.apl-membership-apply-restored) .membership-apply { visibility: hidden; }
}

html.apl-membership-sections-boot:not(.apl-membership-cta-restored) .membership-cta { visibility: hidden; }