/* Fixed hero + independently scrolling offer list. */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.page-shell {
  height: calc(100dvh - 124px);
  max-width: 760px;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden !important;
}

.hero {
  width: 100%;
  height: clamp(350px, 48dvh, 470px);
  min-height: 350px;
  flex: 0 0 auto;
  padding: 225px 46px 24px;
  overflow: hidden;
}

.hero-copy {
  width: min(450px, 76%);
}

.game-kicker {
  margin: 0;
  font-size: 9px;
  line-height: 1;
}

.hero h1 {
  margin: 9px 0 0;
  color: #172132;
  font-size: 40px;
  line-height: 1.01;
  text-align: left;
  letter-spacing: -.038em;
}

.hero h1 strong {
  display: inline;
  color: #172132;
  font-size: 1em;
}

.hero h1 em {
  color: #32b9ee;
  font-style: normal;
}

.hero p {
  width: 100%;
  max-width: 425px;
  margin: 14px 0 0;
  color: #5f6b7d;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  letter-spacing: .045em;
}

.file-size { display: none; }

.offers {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 18px 28px 34px;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.legal { display: none; }
.offers::-webkit-scrollbar { width: 5px; }
.offers::-webkit-scrollbar-track { background: transparent; }
.offers::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(55, 164, 211, .45); }

/* Real help center styling. */
.help-modal {
  align-items: center;
  background: rgba(19, 34, 55, .74);
}

.help-sheet {
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(91, 211, 255, .30), transparent 35%),
    linear-gradient(150deg, #178dc3, #1baedb 52%, #45c9ed);
  border: 1px solid rgba(255,255,255,.28);
}

.help-head small { color: #d9f6ff; }
.help-head h2 { color: #fff; }
.help-head>button { color: #fff; background: rgba(255,255,255,.17); }
.help-intro { color: #e2f7ff; }
.faq { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); }
.faq>button { color: #fff; }
.faq>button i { color: #fff08a; }
.faq>p { color: #e8f9ff; }
.faq.active { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.22); }
.faq.active>p b { color: #fff; }
.help-done { color: #157ba8; background: #fff; }

@media (max-width: 620px) {
  .page-shell { height: calc(100dvh - 108px); }
  .hero {
    height: clamp(300px, 43dvh, 355px);
    min-height: 300px;
    padding: 168px 22px 16px;
  }
  .hero-copy { width: 78%; }
  .hero h1 { font-size: clamp(27px, 8.5vw, 34px); }
  .hero p { margin-top: 8px; font-size: 9px; line-height: 1.35; }
  .game-kicker { font-size: 6.8px; }
  .offers { padding: 12px 13px 24px; }
  .help-modal { padding: 12px; }
  .help-sheet { max-height: 88dvh; }
}

@media (max-width: 390px) {
  .hero { height: 300px; min-height: 300px; padding-top: 157px; }
  .hero h1 { font-size: 27px; }
  .hero p { max-width: 270px; font-size: 8px; }
}