/* Mobile adjustments shared by every quiz step and the offer. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
img { max-width: 100%; }
#root > div:last-child > .overflow-y-auto { overscroll-behavior-y: contain; scrollbar-width: none; }
#root > div:last-child > .overflow-y-auto::-webkit-scrollbar { display: none; }
.btn-quiz, .btn-quiz-green { min-height: 54px; line-height: 1.3; white-space: normal; }
.quiz-option { min-height: 48px; }
input { font-size: 16px !important; }
.landing-screen {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.landing-screen > div:first-child { padding-top: 16px; padding-bottom: 10px; }
.landing-screen > div:first-child img { height: 42px; width: auto; }
.landing-screen > div:nth-child(2) {
  flex: 0 0 auto;
  gap: 12px;
  padding: 0 20px 8px;
}
.landing-screen h1 {
  font-size: clamp(20px, 5.4vw, 25px);
  line-height: 1.18;
  max-width: 420px;
  margin-inline: auto;
  text-wrap: balance;
}
.landing-screen h1 + p { font-size: 13px; line-height: 1.45; padding-inline: 0; }
.landing-hero {
  flex: none !important;
  height: clamp(260px, 43svh, 360px);
  border-radius: 20px;
  overflow: hidden;
  background: #f4e9dc;
}
.landing-hero > img { object-position: center 25%; }
.landing-hero > div:first-child:has(+ img) { display: none; }
.landing-screen .btn-quiz-green { font-size: 14px; padding: 16px 12px; }
.landing-screen .landing-hero + div { font-size: 12px; line-height: 1.45; padding-inline: 8px; }
.landing-screen > div:nth-child(2) > div:last-child { font-size: 10px; gap: 6px 10px; line-height: 1.4; }
@media (max-width: 480px) {
  h2.text-2xl { font-size: clamp(20px, 5.6vw, 24px); line-height: 1.3; text-wrap: balance; }
  .px-5 { padding-left: 20px; padding-right: 20px; }
  .py-8 { padding-top: 24px; padding-bottom: 24px; }
  .quiz-option { overflow-wrap: anywhere; }
  .quiz-option img { object-fit: cover; }
  .text-5xl { font-size: 42px; }
  .text-3xl { font-size: 28px; }
}
@media (max-width: 359px) {
  .landing-screen > div:nth-child(2) { padding-inline: 16px; }
  .landing-screen h1 { font-size: 19px; }
  .landing-screen .btn-quiz-green { font-size: 12px; }
  .px-6 { padding-left: 18px; padding-right: 18px; }
}
@media (max-height: 700px) {
  .landing-screen > div:first-child { padding-top: 10px; padding-bottom: 8px; }
  .landing-screen > div:nth-child(2) { gap: 10px; }
  .landing-hero { height: 250px; }
}