.renew-membership-main { background: var(--color-canvas); }

.renew-membership-header {
  display: flex;
  min-height: 276px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 78px var(--content-inset) 48px;
}
.renew-membership-header__eyebrow,
.renew-membership-methods__legend {
  max-width: 100%;
  color: var(--color-warm-grey);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  letter-spacing: var(--tracking-eyebrow);
  overflow-wrap: anywhere;
}
.renew-membership-header__title {
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading-compact);
  letter-spacing: var(--tracking-heading-large);
  overflow-wrap: anywhere;
}
.renew-membership-header__intro { max-width: min(760px, 100%); color: var(--color-warm-grey); font-size: var(--font-size-body-lg); line-height: var(--line-height-body); overflow-wrap: anywhere; }

.renew-membership-body { padding: 0 var(--content-inset) 120px; }
.renew-membership-form { display: grid; grid-template-columns: minmax(0, 856fr) minmax(0, 400fr); align-items: start; gap: 40px; }
.renew-membership-payment { min-width: 0; }
.renew-membership-methods { min-width: 0; }
.renew-membership-methods__legend { display: block; width: 100%; margin-bottom: 16px; padding: 0; }
.renew-membership-methods__choices { display: flex; flex-direction: column; gap: 12px; }
.renew-membership-choice {
  display: flex;
  min-width: 0;
  min-height: 99px;
  align-items: center;
  gap: 16px;
  padding: 23px 25px;
  border: 1px solid #dcd8d0;
  border-radius: 14px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.renew-membership-choice:has(input:checked) { border: 1.6px solid var(--color-accent); background: #e8efea; }
.renew-membership-choice:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.renew-membership-choice__radio { display: grid; width: 20px; height: 20px; flex: none; place-items: center; border: 1.4px solid #c6c1b8; border-radius: 50%; }
.renew-membership-choice__radio img { display: none; width: 20px; height: 20px; max-width: none; }
.renew-membership-choice:has(input:checked) .renew-membership-choice__radio { border: 0; }
.renew-membership-choice:has(input:checked) .renew-membership-choice__radio img { display: block; }
.renew-membership-choice__copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.renew-membership-choice__title { color: var(--color-ink); font-family: var(--font-heading); font-size: var(--font-size-heading-10); font-weight: var(--font-weight-heading); line-height: 1.2; letter-spacing: var(--tracking-heading); overflow-wrap: anywhere; }
.renew-membership-choice__sub { color: var(--color-warm-grey); font-size: var(--font-size-body-sm); line-height: 1.214286; letter-spacing: var(--tracking-body-sm); overflow-wrap: anywhere; }

.renew-membership-details { min-width: 0; margin-top: 32px; }
.renew-membership-details__panel { min-width: 0; padding: 29px 35px 29.6px; border: 1px solid #dcd8d0; border-radius: 20px; background: var(--color-surface); }
.renew-membership-details__panel[hidden] { display: none; }
.renew-membership-details__title { margin-bottom: 22px; font-size: var(--font-size-heading-9); font-weight: var(--font-weight-heading); line-height: 1.18; letter-spacing: var(--tracking-heading); overflow-wrap: anywhere; }
.renew-membership-fields { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.renew-membership-fields__pair { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.renew-membership-field { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.renew-membership-field label { max-width: 100%; color: var(--color-warm-grey); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); line-height: 1.2; overflow-wrap: anywhere; }
.renew-membership-field input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 59px;
  padding: 15px 18px;
  border: 1px solid #dcd8d0;
  border-radius: 8px;
  outline: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.renew-membership-field input::placeholder { color: #9a968e; opacity: 1; }
.renew-membership-field input:hover { border-color: #9a968e; }
.renew-membership-field input:focus { border: 1.6px solid var(--color-accent); box-shadow: 0 0 0 3px rgb(0 79 50 / 12%); }
.renew-membership-details__panel--invoice p { color: var(--color-warm-grey); font-size: var(--font-size-body-sm); line-height: var(--line-height-body); overflow-wrap: anywhere; }

.renew-membership-summary { min-width: 0; padding: 31px; border: 1px solid #f2f0ea; border-radius: 20px; background: #f2f0ea; }
.renew-membership-summary__title { margin-bottom: 22px; font-size: var(--font-size-heading-10); line-height: var(--line-height-tight); letter-spacing: var(--tracking-heading); overflow-wrap: anywhere; }
.renew-membership-summary__lines { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.renew-membership-summary__row { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 12px; color: var(--color-warm-grey); font-size: var(--font-size-body-sm); line-height: normal; letter-spacing: var(--tracking-body-sm); }
.renew-membership-summary__row span { min-width: 0; overflow-wrap: anywhere; }
.renew-membership-summary__row > span:last-child { color: var(--color-ink); font-weight: var(--font-weight-medium); text-align: right; }
.renew-membership-summary__rule { height: 1px; background: #dcd8d0; }
.renew-membership-summary__row--total { align-items: center; color: var(--color-ink); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); letter-spacing: 0; }
.renew-membership-summary__row--total > span:last-child { font-family: var(--font-heading); font-size: var(--font-size-heading-11); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-11); letter-spacing: var(--tracking-heading); }
.renew-membership-summary__mobile-total { display: none; }
.renew-membership-summary__pay { width: 100%; margin-top: 26px; font: inherit; white-space: normal; }
.renew-membership-summary__pay > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.renew-membership-summary__pay:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.renew-membership-summary__note { margin-top: 18px; color: var(--color-warm-grey); font-size: var(--font-size-body-sm); line-height: normal; letter-spacing: var(--tracking-body-sm); overflow-wrap: anywhere; }

html.renew-membership-motion-boot .renew-membership-header__eyebrow,
html.renew-membership-motion-boot .renew-membership-header__title,
html.renew-membership-motion-boot .renew-membership-header__intro,
html.renew-membership-motion-boot .renew-membership-methods__legend,
html.renew-membership-motion-boot .renew-membership-methods__choices,
html.renew-membership-motion-boot .renew-membership-details,
html.renew-membership-motion-boot .renew-membership-summary { opacity: 0; visibility: hidden; }

@media (max-width: 1366px) {
  .renew-membership-header { padding-inline: 48px; }
  .renew-membership-body { padding-inline: 48px; }
}
@media (max-width: 900px) {
  .renew-membership-header { min-height: 0; padding: 66px 36px 42px; }
  .renew-membership-header__title { font-size: 50px; }
  .renew-membership-body { padding: 0 36px 80px; }
  .renew-membership-form { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  .renew-membership-header { min-height: 212px; gap: 12px; padding: 54px 24px 28px; }
  .renew-membership-header__eyebrow,
  .renew-membership-methods__legend { font-size: var(--font-size-section-meta); line-height: 1.2; }
  .renew-membership-header__title { font-size: var(--font-size-heading-compact); }
  .renew-membership-header__intro { font-size: var(--font-size-body-compact); line-height: 1.72; }
  .renew-membership-body { padding: 0 24px 72px; }
  .renew-membership-form { gap: 16px; }
  .renew-membership-methods__legend { margin-bottom: 12px; }
  .renew-membership-methods__choices { gap: 10px; }
  .renew-membership-choice { padding: 24.3px 25px; }
  .renew-membership-choice:first-child { min-height: 99px; padding-block: 23px; }
  .renew-membership-choice__title { font-size: var(--font-size-h6); }
  .renew-membership-details { margin-top: 24px; }
  .renew-membership-details__panel { padding: 22.15px 21px; border-radius: 18px; }
  .renew-membership-details__title { margin-bottom: 16px; font-size: var(--font-size-heading-7); }
  .renew-membership-fields { gap: 16px; }
  .renew-membership-fields__pair { gap: 12px; }
  .renew-membership-summary { padding: 21.3px 21px; border-radius: 18px; }
  .renew-membership-summary__title { margin-bottom: 18px; font-size: var(--font-size-heading-7); line-height: 1.18; }
  .renew-membership-summary__lines { gap: 12px; }
  .renew-membership-summary__row--total > span:last-child { font-size: 20px; line-height: normal; }
  .renew-membership-summary__desktop-total { display: none; }
  .renew-membership-summary__mobile-total { display: inline; }
  .renew-membership-summary__pay { margin-top: 22px; }
  .renew-membership-summary__note { margin-top: 16px; font-size: var(--font-size-caption); line-height: 1.68; letter-spacing: 0; }
}
@media (max-width: 359px) {
  .renew-membership-header, .renew-membership-body { padding-inline: 18px; }
  .renew-membership-choice { padding-inline: 18px 15px; }
  .renew-membership-choice__title { font-size: var(--font-size-heading-7); }
  .renew-membership-details__panel, .renew-membership-summary { padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .renew-membership-choice, .renew-membership-field input { transition-duration: .01ms; }
  html.renew-membership-motion-boot .renew-membership-header__eyebrow,
  html.renew-membership-motion-boot .renew-membership-header__title,
  html.renew-membership-motion-boot .renew-membership-header__intro,
  html.renew-membership-motion-boot .renew-membership-methods__legend,
  html.renew-membership-motion-boot .renew-membership-methods__choices,
  html.renew-membership-motion-boot .renew-membership-details,
  html.renew-membership-motion-boot .renew-membership-summary { opacity: 1; visibility: visible; }
}