:root {
  --color-success-50: #E3F2D9;
  --color-success-100: #CAE5B8;
  --color-success-200: #B1D798;
  --color-success-300: #99C879;
  --color-success-400: #80B85B;
  --color-success-500: #6A9D48;
  --color-success-600: #517B3D;
  --color-success-700: #3B5B31;
  --color-success-800: #273C23;
  --color-success-900: #141F13;
  --color-success-950: #020302;
  --color-warning-50: #FFFDFA;
  --color-warning-100: #FEECCE;
  --color-warning-200: #FDDCA4;
  --color-warning-300: #FACE7A;
  --color-warning-400: #F7C052;
  --color-warning-500: #F2B32A;
  --color-warning-600: #DE9B10;
  --color-warning-700: #B17B0F;
  --color-warning-800: #865B0D;
  --color-warning-900: #5B3E0A;
  --color-warning-950: #312106;
  --color-error-50: #FFFAFA;
  --color-error-100: #FDD6D8;
  --color-error-200: #F9ACAE;
  --color-error-300: #F38485;
  --color-error-400: #ED5C5C;
  --color-error-500: #E53936;
  --color-error-600: #D01D1D;
  --color-error-700: #A61A1A;
  --color-error-800: #7D1417;
  --color-error-900: #550F11;
  --color-error-950: #2E080A;
  --color-purple-100: #C7C4E2;
  --color-purple-200: #A9A3D3;
  --color-purple-300: #8A82C4;
  --color-purple-400: #6C60B5;
  --color-purple-500: #55489D;
  --color-purple-600: #463B84;
  --color-purple-700: #382F6B;
  --color-purple-800: #2A2351;
  --color-purple-900: #1C1737;
  --color-stone-100: #E6DBCC;
  --color-stone-200: #E4D6C4;
  --color-stone-300: #E2D1BC;
  --color-stone-400: #E0CBB4;
  --color-stone-500: #DEC6AB;
  --color-stone-600: #C8A98A;
  --color-stone-700: #AE8C6D;
  --color-stone-800: #8B7059;
  --color-stone-900: #63554A;
  --color-neutral-100: #EDE9DF;
  --color-neutral-200: #D6CDBC;
  --color-neutral-300: #BCB09D;
  --color-neutral-400: #A0927F;
  --color-neutral-500: #7E7367;
  --color-neutral-600: #5F5952;
  --color-neutral-700: #423F3C;
  --color-neutral-800: #262524;
  --color-neutral-900: #0B0B0B;
  --color-lime-100: #EAEB84;
  --color-lime-500: #E2E42F;
  --color-lime-900: #4E5E05;
  --color-coral-100: #FBC;
  --color-coral-500: #F2694A;
  --color-coral-900: #AD2527;
  --color-blue-100: #D8F0F3;
  --color-blue-500: #00A0BD;
  --color-blue-900: #007297;
}

/* CSS Reset: https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
  outline: none;
  box-shadow: none;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

html {
  height: 100%;
  font-size: 16px;
}

body {
  height: 100%;
}

.form,
.confirmation {
  padding: 1.5rem 1rem;
  color: var(--color-neutral-600);
}
.form__inner,
.confirmation__inner {
  margin: 0 auto;
  padding: 2rem 1rem;
  width: 100%;
  max-width: 60rem;
  border: 0.0625rem solid var(--color-neutral-200);
  border-radius: 1.5rem;
}
@media (min-width: 768px) {
  .form__inner,
  .confirmation__inner {
    padding: 2.5rem;
  }
}
@media (min-width: 1040px) {
  .form,
  .confirmation {
    margin-left: auto;
    margin-right: auto;
  }
}

.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.confirmation header {
  margin-bottom: 1.5rem;
}
.confirmation__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.confirmation__main {
  margin-bottom: 4rem;
}
.confirmation__image {
  margin-bottom: 1.5rem;
}

.form__title {
  font-family: "roca", sans-serif;
  font-weight: 700;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 0.5rem;
  font-size: 2.5rem;
  line-height: 120%;
  color: var(--color-neutral-900);
}

.form__summary {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 150%;
  color: var(--color-neutral-600);
}

.label {
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
  line-height: 130%;
}

.label-asterix--error {
  color: var(--color-error-600);
}

.hint-text {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 150%;
}

.error-text {
  font-family: "Reddit Sans", serif;
  font-weight: 700;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 150%;
  color: var(--color-error-600);
}

.confirmation__title {
  font-family: "Reddit Sans", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  line-height: 120%;
  text-align: center;
  color: var(--color-neutral-900);
}
@media (min-width: 768px) {
  .confirmation__title {
    font-size: 2.5rem;
  }
}

.confirmation__summary {
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 130%;
  text-align: center;
  color: var(--color-neutral-600);
}

.confirmation__description {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  max-width: 35em;
  font-size: 1rem;
  line-height: 150%;
  text-align: center;
  color: var(--color-neutral-900);
}

.input {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  width: 100%;
  height: 3.25rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  font-size: 1.125rem;
  line-height: 150%;
  color: var(--color-neutral-900);
  border: 0.0625rem solid var(--color-neutral-400);
  border-radius: 0.5rem;
}
.input:hover {
  border-color: var(--color-neutral-900);
}
.input:focus {
  border-color: var(--color-neutral-900);
  outline: 4px solid #C4BDFF;
}
.input::-moz-placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}
.input::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}

.input--error {
  border-color: var(--color-error-600);
}
.input--error:hover {
  border-color: var(--color-error-600);
}
.input--error:focus {
  border-color: var(--color-error-600);
  outline: 4px solid var(--color-coral-100);
}
.input--error::-moz-placeholder {
  color: var(--color-error-600);
  opacity: 1;
}
.input--error::placeholder {
  color: var(--color-error-600);
  opacity: 1;
}

.textarea {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  width: 100%;
  height: 3.25rem;
  min-height: 9rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  font-size: 1.125rem;
  line-height: 150%;
  color: var(--color-neutral-900);
  border: 0.0625rem solid var(--color-neutral-400);
  border-radius: 0.5rem;
}
.textarea:hover {
  border-color: var(--color-neutral-900);
}
.textarea:focus {
  border-color: var(--color-neutral-900);
  outline: 4px solid #C4BDFF;
}
.textarea::-moz-placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}
.textarea::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}

.textarea--error {
  border-color: var(--color-error-600);
}
.textarea--error:hover {
  border-color: var(--color-error-600);
}
.textarea--error:focus {
  border-color: var(--color-error-600);
  outline: 4px solid var(--color-coral-100);
}
.textarea--error::-moz-placeholder {
  color: var(--color-error-600);
  opacity: 1;
}
.textarea--error::placeholder {
  color: var(--color-error-600);
  opacity: 1;
}

.select {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  width: 100%;
  height: 3.25rem;
  padding: 0.75rem 1rem;
  font-size: 1.125rem;
  line-height: 150%;
  color: var(--color-neutral-900);
  background-color: white;
  border: 0.0625rem solid var(--color-neutral-400);
  border-radius: 0.5rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/assets/chevron-down.svg"); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  padding-right: 52px;
}
.select:hover {
  border-color: var(--color-neutral-900);
}
.select:focus {
  border-color: var(--color-neutral-900);
  outline: 4px solid #C4BDFF;
}

.select--error {
  border-color: var(--color-error-600);
}
.select--error:hover {
  border-color: var(--color-error-600);
}
.select--error:focus {
  border-color: var(--color-error-600);
  outline: 4px solid var(--color-coral-100);
}

.button {
  font-family: "Reddit Sans", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 1rem;
  letter-spacing: 0.009375rem;
  line-height: 120%;
  color: white;
  background-color: var(--color-purple-500);
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-decoration: none;
}
.button:hover {
  background-color: var(--color-purple-700);
}
.button:focus {
  background-color: var(--color-purple-500);
  outline: 4px solid #C4BDFF;
}
.button:disabled {
  cursor: not-allowed;
  color: var(--color-neutral-300);
  background-color: var(--color-neutral-100);
}

.button--expanded {
  padding-left: 1.375rem;
  padding-right: 1.375rem;
  height: 3.25rem;
}

.button--inverse {
  color: black;
  background-color: var(--color-neutral-100);
}
.button--inverse:hover, .button--inverse:focus {
  background-color: var(--color-neutral-200);
}
.button--inverse:disabled {
  color: var(--color-neutral-300);
  background-color: var(--color-neutral-200);
}

.button--neutral {
  color: var(--color-neutral-800);
  border: 0.0625rem solid var(--color-neutral-400);
  background-color: white;
}
.button--neutral:hover {
  color: var(--color-neutral-900);
  background-color: white;
  border-color: var(--color-neutral-900);
}
.button--neutral:focus {
  background-color: white;
  border-color: white;
  outline: 4px solid #C4BDFF;
}
.button--neutral:disabled {
  cursor: not-allowed;
  color: var(--color-neutral-300);
  border-color: var(--color-neutral-200);
  background-color: white;
}

.checkbox {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.checkbox__input {
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0.0625rem solid var(--color-neutral-400);
  border-radius: 0.125rem;
  vertical-align: middle;
  cursor: pointer;
}
.checkbox__input:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px; /* Adjust size as needed */
  height: 9px; /* Adjust size as needed */
  background: url('data:image/svg+xml;utf8,<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6667 1.5L4.25 7.91667L1.33334 5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.checkbox__input:checked {
  background-color: var(--color-purple-500);
  border-color: var(--color-purple-500);
}
.checkbox__input:checked:before {
  opacity: 1;
}
.checkbox__input:hover {
  border-color: var(--color-neutral-900);
}
.checkbox__input:focus, .checkbox__input:focus-visible {
  border-color: var(--color-neutral-900);
  outline: 4px solid #C4BDFF;
}
.checkbox__input:disabled {
  cursor: not-allowed;
  border-color: var(--color-neutral-200);
}
.checkbox__input:disabled:before {
  color: var(--color-neutral-200) !important;
  background: url('data:image/svg+xml;utf8,<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6667 1.5L4.25 7.91667L1.33334 5" stroke="%23d6cdbc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
}
.checkbox__input:checked:disabled {
  background-color: transparent;
}
.checkbox__description {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 150%;
  color: var(--color-neutral-900);
}

.radio {
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.25rem;
  line-height: 130%;
  color: var(--color-neutral-900);
  cursor: pointer;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.radio__control {
  display: block;
  position: absolute;
  top: 0.1875rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border: 0.0625rem solid var(--color-neutral-400);
  border-radius: 0.625rem;
}

.radio:hover .radio__control {
  border-color: var(--color-neutral-900);
}

.radio input[type=radio]:focus + .radio__control {
  border-color: var(--color-neutral-900);
  outline: 4px solid #C4BDFF;
}

.radio input[type=radio]:checked + .radio__control {
  border: 0.375rem solid var(--color-purple-500);
}

.form__fieldset {
  all: unset;
  display: block;
  margin-bottom: 1.25rem;
}
.form__fieldset__header {
  all: unset;
  display: block;
  width: 100%;
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 120%;
  color: var(--color-neutral-900);
}
.form__fieldset__description {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 150%;
  color: var(--color-neutral-600);
}
.form__fieldset__inner {
  margin-top: 1.25rem;
}

.form__field {
  margin-top: 1.25rem;
}
@media (min-width: 768px) {
  .form__field {
    margin-top: 1.5rem;
  }
}

.form__submit-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 1rem;
  margin-top: 1.25rem;
}
.form__submit-actions .button {
  width: 100%;
}
.form__submit-actions--two-wide .button {
  width: calc(50% - 8px);
}
@media (min-width: 480px) {
  .form__submit-actions {
    justify-content: flex-end;
  }
  .form__submit-actions .button {
    width: auto;
    min-width: 9.375rem;
  }
  .form__submit-actions--two-wide .button {
    width: auto;
  }
}
@media (min-width: 768px) {
  .form__submit-actions {
    margin-top: 3rem;
  }
}

.addr-search {
  margin-top: 1.25rem;
}
.addr-search__input {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
.addr-search__input .button {
  min-width: 9.375rem;
}
.addr-search__manual-action {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 150%;
  color: var(--color-blue-900);
}
@media (min-width: 768px) {
  .addr-search__input {
    margin-top: 0.5rem;
  }
  .addr-search__input .input {
    margin-top: 0;
  }
}

.progress-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  margin: 1.25rem 0 2.5rem;
  width: 100%;
  padding: 0;
  list-style: none;
}
.progress-bar:before {
  content: "";
  z-index: -1;
  display: block;
  position: absolute;
  top: 0.875rem;
  height: 0.0625rem;
  background-color: var(--color-purple-100);
  width: 100%;
}
@media (min-width: 768px) {
  .progress-bar {
    justify-content: space-between;
  }
  .progress-bar:before {
    top: 0.71875rem;
  }
}
@media (max-width: 768px) {
  .progress-bar .progress-bar__item--current .progress-bar__item__label {
    display: block;
  }
}

.progress-bar__item {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-grow: 1;
}
.progress-bar__item > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.progress-bar__item--current > div {
  align-items: center;
}
.progress-bar__item--current:first-child {
  display: flex;
  justify-content: flex-start;
}
.progress-bar__item--current:last-child {
  display: flex;
  justify-content: flex-end;
}
.progress-bar__item--current:first-child:before {
  display: block;
}
.progress-bar__item--current:last-child:before {
  display: block;
}
.progress-bar__item--complete {
  align-items: flex-start;
}
.progress-bar__item--complete > div {
  align-items: flex-start;
}
@media (min-width: 768px) {
  .progress-bar__item {
    position: relative;
    flex-grow: 0;
  }
  .progress-bar__item > div {
    align-items: center;
  }
  .progress-bar__item--complete > div {
    align-items: center;
  }
  .progress-bar__item:first-child:before, .progress-bar__item:last-child:before {
    display: block;
  }
}

.progress-bar__item__number {
  font-family: "Reddit Sans", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  width: 1.875rem;
  height: 1.875rem;
  font-size: 1rem;
  line-height: 100%;
  color: var(--color-purple-500);
  background-color: white;
  border: 0.0625rem solid var(--color-purple-100);
  border-radius: 0.9375rem;
}
.progress-bar__item--current .progress-bar__item__number {
  color: white;
  background-color: var(--color-purple-500);
  border-color: var(--color-purple-500);
}
.progress-bar__item:first-child .progress-bar__item__number:before {
  content: "";
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  width: 12.5rem;
  background-color: white;
}
.progress-bar__item:last-child .progress-bar__item__number:before {
  content: "";
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 12.5rem;
  background-color: white;
}
.progress-bar__item--complete .progress-bar__item__number {
  color: white;
  background-color: var(--color-purple-500);
  border-color: var(--color-purple-500);
}
@media (min-width: 768px) {
  .progress-bar__item__number {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
    border-radius: 0.75rem;
  }
}

.progress-bar__item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 120%;
  color: var(--color-purple-500);
}
.progress-bar__item--current .progress-bar__item__label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: none;
}
@media (min-width: 768px) {
  .progress-bar__item__label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: none;
  }
}

.mem-options {
  /* Hide default radio buttons */
}
.mem-options > * {
  display: block;
  margin-top: 1.25rem;
}
.mem-options > *:first-child {
  margin-top: 0;
}
.mem-options input[type=radio] {
  position: absolute;
  opacity: 0;
}
@media (min-width: 768px) {
  .mem-options {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
  }
  .mem-options > * {
    flex: 1;
    margin-top: 0;
  }
}

.mem-option {
  position: relative;
  cursor: pointer;
}

.mem-option__content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 0.0625rem solid var(--color-neutral-200);
  border-radius: 0.625rem;
}
input[type=radio]:checked + .mem-option__content {
  background-color: rgba(85, 72, 157, 0.1);
  border-color: var(--color-purple-500);
  outline: 0.0625rem solid var(--color-purple-500);
}
input[type=radio]:focus + .mem-option__content {
  border-color: var(--color-purple-500);
  outline: 4px solid #C4BDFF;
}

.mem-option__tags {
  order: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mem-option__tag {
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 130%;
  color: var(--color-neutral-700);
  background-color: white;
  border: 0.0625rem solid var(--color-neutral-200);
  border-radius: 0.25rem;
}
.mem-option__tag--highlight {
  color: white;
  border-color: var(--color-blue-500);
  background-color: var(--color-blue-500);
}

.mem-option__price {
  order: 2;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.125rem;
}
.mem-option__price__amount {
  font-family: "roca", sans-serif;
  font-weight: 700;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 3.5rem;
  line-height: 100%;
  color: var(--color-neutral-900);
}
.mem-option__price__frequency {
  font-family: "roca", sans-serif;
  font-weight: 700;
  font-optical-sizing: auto;
  font-style: normal;
  padding-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 120%;
  color: var(--color-neutral-900);
}

.mem-option__period {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  order: 3;
  display: block;
  font-size: 1rem;
  line-height: 150%;
  color: var(--color-neutral-700);
}

.mem-option__button {
  order: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.875rem;
  height: 2.75rem;
  border: 0.0625rem solid var(--color-neutral-400);
  border-radius: 0.375rem;
}
.mem-option__button span, .mem-option__button:before {
  font-family: "Reddit Sans", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1rem;
  line-height: 120%;
  color: var(--color-neutral-800);
}
.mem-option__button:hover {
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-900);
  cursor: pointer;
}
input[type=radio]:checked + .mem-option__content .mem-option__button {
  color: white;
  background-color: var(--color-purple-500);
  border-color: var(--color-purple-500);
}
input[type=radio]:checked + .mem-option__content .mem-option__button span {
  display: none;
}
input[type=radio]:checked + .mem-option__content .mem-option__button:before {
  content: "Selected";
  color: white;
}

.mem-types {
  /* Hide default radio buttons */
}
.mem-types > * {
  display: block;
  margin-top: 1.25rem;
}
.mem-types > *:first-child {
  margin-top: 0;
}
.mem-types input[type=radio] {
  position: absolute;
  opacity: 0;
}
@media (min-width: 768px) {
  .mem-types {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
  }
  .mem-types > * {
    flex: 1;
    margin-top: 0;
  }
}

.mem-type__option {
  position: relative;
  cursor: pointer;
}

.mem-type__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 0.0625rem solid var(--color-neutral-200);
  border-radius: 0.625rem;
}
.mem-type__content:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.0625rem solid var(--color-neutral-200);
  border-radius: 0.625rem;
}
.mem-type__content:hover {
  border-color: var(--color-neutral-900);
}
input[type=radio]:checked + .mem-type__content {
  border-color: var(--color-purple-500);
  outline: 0.0625rem solid var(--color-purple-500);
}
input[type=radio]:checked + .mem-type__content:before {
  border: 0.375rem solid var(--color-purple-500);
}
input[type=radio]:focus + .mem-type__content {
  border-color: var(--color-neutral-900);
  outline: 4px solid #C4BDFF;
}

.mem-type__title {
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--color-neutral-900);
}

.mem-selects__labels {
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.mem-selects__labels li {
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1rem;
  line-height: 130%;
  color: var(--color-neutral-700);
}
@media (min-width: 768px) {
  .mem-selects__labels {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
    padding-right: 1rem;
    gap: 2rem;
  }
  .mem-selects__labels > li {
    width: 5.9375rem;
  }
}

.mem-select {
  position: relative;
  padding: 1rem 0.75rem;
  background-color: var(--color-neutral-100);
  border-radius: 0.375rem;
}
.mem-select:nth-child(2n+2) {
  background-color: white;
}
.mem-select .radio {
  display: inline-block;
  margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .mem-select {
    padding-right: 23.8125rem;
  }
}

.mem-select__hint {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 150%;
  color: var(--color-neutral-800);
}
@media (min-width: 768px) {
  .mem-select__hint {
    margin-bottom: 0;
    max-width: 27.5rem;
  }
}

.mem-select__costs {
  all: unset;
  display: block;
  padding-left: 1.75rem;
}
.mem-select__costs legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 768px) {
  .mem-select__costs {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    position: absolute;
    top: 1rem;
    right: 0.75rem;
    padding-left: 0;
    width: 21.8125rem;
  }
}

.mem-select__cost {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 0.125rem;
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--color-neutral-900);
}
.mem-select__cost strong {
  font-weight: 700;
}
.mem-select__cost:last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .mem-select__cost {
    flex: 1;
    margin-bottom: 0;
  }
  .mem-select__cost span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.note {
  font-family: "Reddit Sans", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  max-width: 35em;
  font-size: 1rem;
  line-height: 150%;
  color: var(--color-neutral-600);
  margin-top: 1.25rem;
}
.note a {
  color: var(--color-blue-900);
  text-decoration: underline;
}

.form__divider {
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
  border: none;
  border-top: 0.0625rem solid var(--color-neutral-200);
}

.summary {
  padding: 1rem;
  background-color: var(--color-neutral-100);
  border-radius: 0.75rem;
}
@media (min-width: 768px) {
  .summary {
    padding: 2rem;
  }
}

.summary__title {
  font-family: "Reddit Sans", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  line-height: 120%;
  color: var(--color-neutral-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) {
  .summary__title {
    font-size: 2rem;
    line-height: 120%;
  }
}

.summary__entry {
  margin-top: 1rem;
}
.summary__entry:first-child {
  margin-top: 0;
}

.summary__label {
  font-family: "Reddit Sans", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--color-neutral-600);
}

.summary__value {
  font-family: "Reddit Sans", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 120%;
  color: var(--color-neutral-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) {
  .summary__value {
    font-size: 1.5rem;
    line-height: 120%;
  }
}

.checkout-dummy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 25rem;
  margin-top: 1.25rem;
  background: var(--color-purple-100);
  border-radius: 1rem;
}
.checkout-dummy__text {
  font-family: "Reddit Sans", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 145%;
  color: black;
}
@media (min-width: 768px) {
  .checkout-dummy {
    margin-top: 1.5rem;
    border-radius: 1.5rem;
  }
}

.form__header {
  margin-bottom: 3.125rem;
}