.brand > span { display: none; }
.checkout-card .email-field + .pay-button { margin-top: 20px; }
.site-footer { margin-top: 28px; }
body[data-world=roblox] .game-hero,
body[data-world=standoff] .game-hero,
body[data-world=brawl] .game-hero { --promo-height: 0px; }

/* One centered offer group inside the existing banner frame. */
.hero-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero-offer .offer-reading {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-offer h1 { text-transform: none; }
.hero-offer .offer-intro {
  color: #fff3d6;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.35px;
  white-space: nowrap;
}
.hero-offer .offer-intro > span { display: inline; color: inherit; }
.hero-offer .offer-current { align-items: baseline; gap: 12px; }
.hero-offer .offer-current strong {
  color: #fff0c2;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1px;
  text-shadow: 0 2px 18px #ffd47c2b;
}
.hero-offer .offer-currency { margin-left: 3px; font-size: .62em; letter-spacing: 0; }
.hero-offer .offer-was { color: #e8a1a8; font-size: 20px; }
.hero-offer .offer-was s { text-decoration-thickness: 2px; }
@media (max-width: 560px) {
  .hero-offer .offer-reading { align-items: center; }
  .hero-offer .offer-reading, .hero-offer .offer-current { gap: 10px; }
  .hero-offer .offer-intro { font-size: 16px; text-align: left; }
  .hero-offer .offer-intro > span { display: block; }
  .hero-offer .offer-current strong { font-size: 38px; }
  .hero-offer .offer-was { font-size: 18px; }
}
@media (max-width: 360px) {
  .hero-offer .offer-reading { gap: 6px; }
  .hero-offer .offer-current { gap: 6px; }
  .hero-offer .offer-intro { font-size: 14px; }
  .hero-offer .offer-current strong { font-size: 36px; }
  .hero-offer .offer-was { font-size: 16px; }
}

/* Phone typography is shared across games, including their later overrides. */
@media (max-width: 560px) {
  body[data-world] .campaign { margin-top: 24px; margin-inline: 12px; }
  body[data-world] .game-hero { margin-inline: 0; }
  body[data-world] .hero-scene { height: 196px; }
  body[data-world] .game-hero > .hero-popout-main { right: 4px; }
  body[data-world] .game-hero > .hero-popout-secondary { left: 0; top: 128px; }
  body[data-world] .hero-offer { z-index: 3; margin-top: 10px; align-items: center; gap: 10px; }
  body[data-world] .hero-offer h1 {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.4px;
    text-align: center;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  body[data-world] .hero-offer .robux-goal,
  body[data-world] .hero-offer .game-goal {
    flex: none;
    gap: 6px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.4px;
  }
  body[data-world] .hero-offer .robux-amount,
  body[data-world] .hero-offer .goal-badge {
    gap: 6px;
    padding: 5px 8px;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.7px;
  }
  body[data-world] .hero-offer .robux-amount svg,
  body[data-world] .hero-offer .goal-badge svg { width: 25px; height: 28px; }
  body[data-world] .hero-offer .goal-badge img { width: 27px; height: 29px; }
  body[data-world] .hero-offer .offer-reading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    padding: 0;
    border: 0;
  }
  body[data-world] .hero-offer .offer-intro {
    color: #fff3d6;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
  }
  body[data-world] .hero-offer .offer-intro > span { display: inline; }
  body[data-world] .hero-offer .offer-current { gap: 10px; }
  body[data-world] .hero-offer .offer-current strong {
    font-size: 44px;
    line-height: 1.1;
    text-shadow: none;
  }
  body[data-world] .hero-offer .offer-was { font-size: 18px; }
}
@media (max-width: 360px) {
  body[data-world] .hero-scene { height: 176px; }
  body[data-world] .game-hero > .hero-popout-secondary { top: 108px; }
}
@media (max-width: 420px) {
  body[data-world] .hero-offer h1 { gap: 5px; font-size: 20px; }
  body[data-world] .hero-offer .robux-goal,
  body[data-world] .hero-offer .game-goal { gap: 5px; font-size: 20px; }
  body[data-world] .hero-offer .robux-amount,
  body[data-world] .hero-offer .goal-badge { gap: 5px; padding: 5px 6px; font-size: 26px; }
  body[data-world] .hero-offer .robux-amount svg,
  body[data-world] .hero-offer .goal-badge svg { width: 22px; height: 25px; }
  body[data-world] .hero-offer .goal-badge img { width: 24px; height: 26px; }
}
@media (max-width: 380px) {
  body[data-world] .hero-offer h1 { gap: 4px; font-size: 18px; }
  body[data-world] .hero-offer .robux-goal,
  body[data-world] .hero-offer .game-goal { gap: 4px; font-size: 18px; }
  body[data-world] .hero-offer .robux-amount,
  body[data-world] .hero-offer .goal-badge { gap: 4px; padding: 5px 5px; font-size: 24px; }
  body[data-world] .hero-offer .robux-amount svg,
  body[data-world] .hero-offer .goal-badge svg { width: 20px; height: 23px; }
  body[data-world] .hero-offer .goal-badge img { width: 22px; height: 24px; }
}
@media (max-width: 340px) {
  body[data-world] .hero-offer h1 { gap: 3px; font-size: 18px; }
  body[data-world] .hero-offer .robux-goal,
  body[data-world] .hero-offer .game-goal { gap: 3px; font-size: 16px; }
  body[data-world] .hero-offer .robux-amount,
  body[data-world] .hero-offer .goal-badge { gap: 3px; padding: 5px 4px; font-size: 22px; }
  body[data-world] .hero-offer .robux-amount svg,
  body[data-world] .hero-offer .goal-badge svg { width: 16px; height: 19px; }
  body[data-world] .hero-offer .goal-badge img { width: 18px; height: 20px; }
}

/* Plain benefit rows and one subscription strip. */
.inside-card {
  margin: 24px 0 0;
  padding: 20px;
  border: 1px solid #ffffff12;
  border-radius: 16px;
  background: #111638;
}
.inside-card .inside-heading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -20px -20px 18px;
  padding: 16px 20px;
  border-bottom: 1px solid #ffffff14;
  border-radius: 15px 15px 0 0;
  background: #ffffff06;
  text-align: center;
}
.inside-card .inside-heading > div { min-width: 0; }
.inside-card .section-kicker, .inside-card .course-count { display: none; }
.inside-card .inside-heading h2 {
  margin: 0;
  color: #fff3d6;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.3px;
}
.inside-card .course-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0 0 18px;
  padding: 0;
}
.inside-card .course-features li::before { content: none; }
.inside-card .course-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
}
.inside-card .course-features h3 {
  min-width: 0;
  margin: 0;
  color: #bdc6dc;
  font-size: 13px;
  font-weight: 600;
  line-height: 21px;
}
.inside-card .course-benefit-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 21px;
  color: #a0acc8;
}
.inside-card .course-benefit-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
.inside-card .all-access {
  gap: 15px;
  padding: 0 17px 0 0;
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  background: #ffffff04;
}
.inside-card .all-access-icon {
  align-self: stretch;
  width: 60px;
  height: auto;
  min-height: 68px;
  border: 0;
  border-radius: 0;
  background: #ffffff07;
  color: #b6c1da;
}
.inside-card .all-access > div { min-width: 0; padding: 12px 0; }
.inside-card .all-access h3 { margin: 0 0 3px; font-size: 14px; }
.inside-card .all-access p { color: #a0acc8; }
.inside-card .included-check { color: #b6c1da; }
@media (max-width: 640px) {
  .inside-card { margin-top: 22px; padding: 18px 16px; }
  .inside-card .inside-heading { margin: -18px -16px 16px; padding: 14px 16px; }
  .inside-card .inside-heading h2 { font-size: 16px; }
  .inside-card .course-features { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .inside-card .all-access { gap: 12px; padding-right: 13px; align-items: center; }
  .inside-card .all-access-icon { width: 44px; min-height: 72px; }
}

