/**
 * /join plan summary for GLP-1 wizard finishers (LOL-379).
 *
 * Mobile first: the banner photo is cropped to Jillian with the headline over
 * its dark bottom edge, then the answer echo underneath. From 751px up it
 * becomes the full-width banner with the headline on the right.
 */

.wizard-plan {
  --wizard-plan-dark: #2b2b2d;
  background: var(--wizard-plan-dark);
  color: var(--color-white, #fff);
  font-family: var(--font-body);
  overflow: hidden;
}

.wizard-plan__hero {
  position: relative;
  background: linear-gradient(#a7a7aa, var(--wizard-plan-dark));
}

.wizard-plan__photo {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: 8% top;
}

/* Fade the photo into the dark panel so the headline reads over it. */
.wizard-plan__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(43, 43, 45, 0) 40%, var(--wizard-plan-dark) 96%);
  pointer-events: none;
}

.wizard-plan__intro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 24px 8px;
}

.wizard-plan .wizard-plan__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold, 600);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-electric-lime, #f4ff77);
}

.wizard-plan .wizard-plan__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-thin, 100);
  font-size: 34px;
  line-height: 40px;
  color: var(--color-white, #fff);
  text-wrap: balance;
}

.wizard-plan__summary {
  padding: 16px 24px 28px;
}

.wizard-plan .wizard-plan__built {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.7);
}

.wizard-plan__rows {
  margin: 0;
}

.wizard-plan__row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.wizard-plan__row:first-child {
  border-top: 0;
}

.wizard-plan__row dt {
  flex: 0 0 96px;
  padding-top: 3px;
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold, 600);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.wizard-plan__row dd {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-white, #fff);
}

/* Social proof under the summary (LOL-397). */
.wizard-plan__proof {
  padding: 0 24px 28px;
}

.wizard-plan .wizard-plan__rating {
  margin: 0 0 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.8);
}

.wizard-plan__rating strong {
  color: var(--color-white, #fff);
}

.wizard-plan__stars {
  margin-right: 6px;
  letter-spacing: 2px;
  color: var(--color-electric-lime, #f4ff77);
}

.wizard-plan__quotes {
  display: grid;
  gap: 12px;
}

.wizard-plan__quote {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.wizard-plan__quote blockquote {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-white, #fff);
}

.wizard-plan__quote figcaption {
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold, 600);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 751px) {
  .wizard-plan__photo {
    height: auto;
    aspect-ratio: 1280 / 512;
    object-position: left top;
  }

  .wizard-plan__hero::after {
    background: linear-gradient(rgba(43, 43, 45, 0) 75%, var(--wizard-plan-dark));
  }

  .wizard-plan__intro {
    left: 36%;
    right: 6%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    padding: 0;
    text-align: center;
  }

  .wizard-plan .wizard-plan__title {
    font-size: 50px;
    line-height: 60px;
  }

  .wizard-plan__summary {
    max-width: 1040px;
    margin: 0 auto;
    padding: 8px 32px 36px;
    text-align: center;
  }

  .wizard-plan__rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 24px;
    margin-top: 12px;
    text-align: left;
  }

  .wizard-plan__row {
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .wizard-plan__row:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .wizard-plan__row dt {
    flex: none;
  }

  .wizard-plan__proof {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 32px 36px;
  }

  .wizard-plan .wizard-plan__rating {
    text-align: center;
  }

  .wizard-plan__quotes {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/*
 * Plan cards and card step for wizard finishers (LOL-399), in the new brand
 * type (Canela + Aktiv) so they read as one page with the summary above.
 * Scoped to .wizard-join, which only wizard finishers get.
 */
.wizard-join.outer-container,
.wizard-join .choose-plan-block,
.wizard-join .login-block {
  background: var(--color-surface-grey, #f5f5f5);
}

.wizard-join .choose-plan {
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: 40px auto 8px;
  padding: 0 24px;
  text-align: center;
}

.wizard-join .choose-plan-text {
  max-width: none;
  font-family: var(--font-heading);
  font-weight: var(--fw-thin, 100);
  font-size: 34px;
  line-height: 40px;
  text-align: center;
  color: var(--color-black, #111);
}

.choose-plan-includes {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-dark-grey, #828282);
}

.choose-plan-stores {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.choose-plan-stores img {
  display: block;
  width: auto;
  height: 36px;
}

.choose-plan-devices {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--color-dark-grey, #828282);
}

.wizard-join .plan-block {
  min-width: 240px;
  padding: 28px 24px 24px;
  border: 1px solid var(--color-grey, #e6e5e1);
  border-radius: 16px;
  box-shadow: none;
  font-family: var(--font-body);
}

/* Chosen plan: the plan, then the edit pencil, in one compact row (the
   legacy JS pins it at 604 x 165). */
.wizard-join .selected-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: auto !important;
  max-width: 460px;
  height: auto !important;
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid var(--color-grey, #e6e5e1);
  border-radius: 16px;
  box-shadow: none;
  font-family: var(--font-body);
}

.wizard-join .plan-block .month,
.wizard-join .selected-plan .month {
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold, 600);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-black, #111);
}

.wizard-join .plan-block .price,
.wizard-join .selected-plan .price {
  font-family: var(--font-heading);
  font-weight: var(--fw-thin, 100);
  font-size: 48px;
  line-height: 56px;
  color: var(--color-black, #111);
}

.wizard-join .plan-block .per-month,
.wizard-join .plan-block .after-trial,
.wizard-join .selected-plan .per-month,
.wizard-join .selected-plan .after-trial {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark-grey, #828282);
}

.wizard-join .start-my-trial-btn {
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold, 600);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-badge {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 60px;
  background: var(--color-electric-lime, #f4ff77);
  color: var(--color-black, #111);
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold, 600);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The trial promise under the plan cards, then again above the card form. */
.plan-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  margin: 0 auto 24px;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--color-black, #111);
}

.plan-reassure span::before,
.trial-reassure li::before {
  content: "✓";
  margin-right: 8px;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-green, #024438);
}

.wizard-join .pay-form {
  flex-wrap: wrap;
  font-family: var(--font-body);
}

.trial-reassure {
  flex: 0 0 100%;
  box-sizing: border-box;
  max-width: 460px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  border: 1px solid var(--color-grey, #e6e5e1);
  border-radius: 16px;
  background: var(--color-white, #fff);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 26px;
  color: var(--color-black, #111);
  list-style: none;
}

@media (max-width: 750px) {
  .wizard-join .plan-block,
  .wizard-join .selected-plan {
    box-sizing: border-box;
    width: calc(100% - 32px);
    min-width: 0;
    margin-left: 16px;
    margin-right: 16px;
  }

  .wizard-join .choose-plan-text {
    font-size: 28px;
    line-height: 34px;
  }

  .plan-reassure {
    flex-direction: column;
    align-items: flex-start;
    max-width: 340px;
  }
}

/* After the plan click, keep only the header of the plan step (LOL-394). */
.plan-options--picked > :not(.choose-plan) {
  display: none !important;
}

.wizard-join .plan-options--picked .choose-plan {
  margin-bottom: 24px;
}

/* Wizard finishers are on a path we built: no promo code entry and no HSA/FSA
   detour on /join (LOL-404). */
.wizard-join .truemed-blurb,
.wizard-join #promo-div,
.wizard-join #no-promo {
  display: none !important;
}

.wizard-join--nocard #payment-form-submit {
  width: auto;
  min-width: 200px;
  padding-left: 28px;
  padding-right: 28px;
  white-space: nowrap;
}

.wizard-join .selected-plan #sub {
  flex: 1 1 0;
  min-width: 0;
}

.wizard-join .selected-plan #edit-pencil {
  order: 2;
  flex: 0 0 auto;
}

.plan-consent {
  margin: -8px auto 16px;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: var(--color-dark-grey, #828282);
}

.plan-consent a {
  color: inherit;
  text-decoration: underline;
}

/* Every /join version: keep legal link names on one line ("Terms of Use",
   "Cancellations and Refunds Policy") instead of splitting mid-name. */
.plan-consent a,
#legal-terms-optin a,
#cancel-terms-optin label a {
  white-space: nowrap;
}

/*
 * Card checkout on every /join version (LOL-399): card fields, then the one
 * agreement box, then a full-width button with a hint under it; newsletter
 * and Truemed after the button. The no-card week never reaches this step.
 */
#outer-container form#payment {
  display: flex;
  flex-direction: column;
  max-width: 460px;
  margin: 0 auto;
}

#outer-container form#payment #sandwich {
  display: contents;
}

#outer-container form#payment #pay_form_inputs { order: 1; }
#outer-container form#payment #legal-terms-optin { order: 2; }
#outer-container form#payment #cancel-terms-optin { order: 3; }
#outer-container form#payment #payment-form-submit { order: 4; }
#outer-container form#payment .pay-hint { order: 5; }
#outer-container form#payment #sandwich > div:has(#news-optin) { order: 6; }
#outer-container form#payment #truemed-instructions { order: 7; }

#outer-container form#payment .form-container {
  max-width: none !important;
}

#outer-container #legal-terms-optin {
  margin: 16px 0 4px;
  font-size: 14px;
  line-height: 20px;
}

#outer-container .legal-details {
  margin: 6px 0 0 23px;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-dark-grey, #828282);
}

/* Checkbox and label side by side, wrapped lines indented under the text. */
#outer-container #legal-terms-optin .form-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

#outer-container #legal-terms-optin .form-item input {
  flex: 0 0 auto;
  margin: 2px 0 0;
}

#outer-container #legal-terms-optin .form-item label {
  display: block;
  margin: 0;
  line-height: 20px;
}

#outer-container #legal-terms-optin label.form-required::after {
  display: none;
}

#outer-container .legal-details {
  border: 0;
  padding: 0;
}

#outer-container .legal-details summary {
  cursor: pointer;
  text-decoration: underline;
}

#outer-container .legal-details p,
#outer-container .legal-details div {
  font-size: 12px;
  line-height: 18px;
}

#outer-container #payment-form-submit {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin: 16px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 60px;
  background: var(--color-black, #111);
  color: var(--color-white, #fff);
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold, 600);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

#outer-container #payment-form-submit:disabled,
#outer-container #payment-form-submit.disabled {
  background: #bdbdbd;
  cursor: default;
}

.pay-hint {
  min-height: 19px;
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: var(--color-dark-grey, #828282);
}

#outer-container form#payment #sandwich > div:has(#news-optin),
#outer-container form#payment #truemed-instructions {
  margin-top: 16px;
  font-size: 13px;
}

/* Promo code: a quiet text link in the chosen-plan box, not a call to action. */
#outer-container #no-promo {
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  gap: 4px;
}

#outer-container #no-promo .Have-a-Promo-Code,
#outer-container #no-promo .Click-Here {
  font-family: var(--font-body);
  font-weight: var(--fw-regular, 400);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-dark-grey, #828282);
}

#outer-container #no-promo .Have-a-Promo-Code,
#outer-container #no-promo .Click-Here {
  white-space: nowrap;
}

#outer-container #no-promo .Click-Here {
  text-decoration: underline;
  cursor: pointer;
}

/* Wizard chosen-plan box: plan and pencil on one row, promo link under them
   (the legacy phone styles stack it as a column with the pencil pushed right). */
.wizard-join #selected-plan.selected-plan {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.wizard-join #selected-plan #edit-pencil {
  margin-left: 0;
}

.wizard-join .selected-plan #no-promo {
  order: 3;
  flex: 0 0 100%;
}

/* Payment method tiles: three equal tiles across the form with the logos
   scaled to fit (they were clipped once the form got narrower). */
#outer-container #payment-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 16px;
}

#outer-container #payment-options > div {
  box-sizing: border-box;
  width: auto;
  height: 64px;
  margin: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  padding: 8px;
}

/* $1.99 first month (LOL-394): no PayPal plan exists for this price, so it's
   card or Apple Pay. */
.wizard-join--intro #paypal-select {
  display: none !important;
}

#outer-container.wizard-join--intro #payment-options {
  grid-template-columns: repeat(2, minmax(0, 147px));
  justify-content: center;
}

/* Regular price struck through next to the $1.99 offer (LOL-394). */
.wizard-join .price-was {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-dark-grey, #828282);
  text-decoration: line-through;
}

/* Room under a plan badge so it doesn't sit on the plan name. */
.wizard-join .subscription-container:has(.plan-badge) .plan-block {
  padding-top: 40px;
}