/* 3.6.0 — Mobile alignment for plans and reward sections. */
@media (max-width: 767px) {
  /* Elementor containers keep their generated width/offset rules on phones.
     Reset the plan list to a centred, single-column mobile layout. */
  body .lg-elementor-native .lg-plans .lg-plan-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 48px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  body .lg-elementor-native .lg-plans .lg-plan-grid > .lg-plan-card {
    width: min(100%, 352px) !important;
    min-width: 0 !important;
    max-width: 352px !important;
    margin-inline: auto !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    scroll-snap-align: none !important;
  }

  /* Give both reward amounts the same visual column so the divider sits on
     the exact centre line of the viewport. */
  body .lg-elementor-native .lg-rewards .lg-reward-values,
  body .lg-rewards .lg-reward-values {
    width: min(100%, 386px) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
  }

  body .lg-elementor-native .lg-rewards .lg-reward-values > div:not(.lg-divider),
  body .lg-rewards .lg-reward-values > div:not(.lg-divider) {
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body .lg-elementor-native .lg-rewards .lg-reward-values .lg-divider,
  body .lg-rewards .lg-reward-values .lg-divider {
    width: 1px !important;
    height: 110px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  /* Reward page: one shared mobile content line for the hero, media and form. */
  body .lg-elementor-native.lg-rewards-page .lg-referral-hero-grid,
  body .lg-elementor-native.lg-rewards-page .lg-referral-form-grid {
    width: calc(100% - 40px) !important;
    max-width: 390px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    align-items: stretch !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-hero-copy,
  body .lg-elementor-native.lg-rewards-page .lg-referral-form-copy,
  body .lg-elementor-native.lg-rewards-page .lg-referral-hero .lg-organic-media,
  body .lg-elementor-native.lg-rewards-page .lg-detailed-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-hero-copy {
    min-width: 0 !important;
    align-items: stretch !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-hero-copy > .lg-eyebrow,
  body .lg-elementor-native.lg-rewards-page .lg-referral-hero-copy > .elementor-widget-heading,
  body .lg-elementor-native.lg-rewards-page .lg-referral-price,
  body .lg-elementor-native.lg-rewards-page .lg-referral-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-price > .elementor-widget-container > div {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: end !important;
    column-gap: 10px !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-result {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 430px) {
  body .lg-elementor-native.lg-rewards-page .lg-referral-hero-copy h1.elementor-heading-title {
    font-size: clamp(42px, 11.6vw, 50px) !important;
    letter-spacing: -0.4px !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-price strong {
    font-size: clamp(64px, 17vw, 72px) !important;
    line-height: 0.95 !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-result {
    padding-inline: 16px !important;
    font-size: clamp(23px, 6.3vw, 27px) !important;
  }

  body .lg-elementor-native.lg-rewards-page .lg-referral-result strong {
    font-size: clamp(33px, 8.8vw, 38px) !important;
  }
}