
html,
body {
  padding: 0 !important;
  max-width: 100%;
  overflow-x: hidden !important;
}

.quiz-scroll,
.page-scroll,
.result-scroll {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

@media (max-width:640px){
  :root{--m-gutter:8px;--m-card-pad:12px}
  html,body{overflow-x:hidden;max-width:100%}
  .wrap{
    width:min(calc(100% - var(--m-gutter) * 2),var(--max))!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .sitebar .inner,
  .sitebar .wrap.inner{
    width:min(calc(100% - var(--m-gutter) * 2),var(--max))!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  .question-card,
  .editorial-shell,
  .insight,
  .bonus-shell,
  .bonus-context,
  .result-hero,
  .info-band,
  .substantive,
  .example-card,
  .card,
  .role-card{
    padding-left:var(--m-card-pad)!important;
    padding-right:var(--m-card-pad)!important;
    box-sizing:border-box!important;
    max-width:100%!important;
  }
  .bonus-shell,
  .bonus-context{
    width:min(calc(100% - var(--m-gutter) * 2),var(--max))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .content-layout,
  .hero-grid,
  .result-copy,
  .result-hero,
  .content-layout>div,
  .question-card,
  .editorial-shell{
    min-width:0!important;
    max-width:100%!important;
  }
  [data-ad-slot]{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }
  .hero-title{
    white-space:normal!important;
    text-align:center;
    max-width:100%;
  }
  .hero-title-top,
  .hero-title-kpop,
  .hero-title-bottom{white-space:normal!important}
  .hero-desc,
  .hero-title+p{
    text-align:center;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero .cta-row{
    justify-content:center;
    width:100%;
  }
  .hero-stage{
    max-width:100%;
    width:100%;
    justify-self:center;
  }
  .section h2,
  .editorial-shell h2,
  .question-card h1{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .cta-row>.btn{max-width:100%}
}
