/* ================================================================
   PROJECT05 / MQ-5D
   Media Quiz attract landing.
   Fully scoped: must not alter other public game experiences.
   ================================================================ */

.mq-attract-shell{
  min-height:100vh;
  min-height:100dvh;
  padding-top:
    max(
      clamp(10px,1.3vw,22px),
      env(safe-area-inset-top)
    );
  padding-right:
    max(
      clamp(10px,1.3vw,22px),
      env(safe-area-inset-right)
    );
  padding-bottom:
    max(
      clamp(14px,1.6vw,26px),
      env(safe-area-inset-bottom)
    );
  padding-left:
    max(
      clamp(10px,1.3vw,22px),
      env(safe-area-inset-left)
    );
  overflow-x:clip;
}

.mq-attract-shell .pg12-brandbar{
  width:min(1600px,100%);
  padding:
    clamp(12px,1.4vw,20px)
    clamp(14px,1.8vw,24px);
  gap:clamp(12px,1.8vw,24px);
}

.mq-attract-shell
.pg2-brandbar__logos{
  min-width:0;
  flex-wrap:nowrap;
}

.mq-attract-shell .pg2-logo{
  min-width:0;
  height:clamp(58px,5vw,76px);
  padding:7px 10px;
}

.mq-attract-shell .pg2-logo img{
  display:block;
  width:100%;
  max-width:100%;
  height:min(
    var(--logo-height),
    clamp(38px,4vw,54px)
  );
  object-fit:contain;
  object-position:center;
}

.mq-attract-shell
.pg12-logo-area-text{
  max-width:100%;
  overflow-wrap:anywhere;
}

.mq-attract-shell
.mq-attract-landing{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(1600px,100%);
  min-height:
    clamp(
      560px,
      calc(100dvh - 180px),
      940px
    )!important;
  align-items:center;
}

.mq-attract-shell
.mq-attract-landing::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -12% -30% auto;
  width:clamp(280px,38vw,680px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--pg-accent) 12%,
        transparent
      ),
      transparent 68%
    );
  pointer-events:none;
}

.mq-attract-shell
.pg12-landing-copy{
  position:relative;
  z-index:2;
}

.mq-attract-shell
.pg2-eyebrow,
.mq-attract-shell
.pg12-landing-copy h2,
.mq-attract-shell
.pg12-landing-copy>p,
.mq-attract-shell
.mq-attract-copy,
.mq-attract-shell
.pg12-landing-metrics,
.mq-attract-shell
.mq-attract-cta{
  will-change:transform,opacity;
}

.mq-attract-copy{
  display:grid;
  gap:4px;
  margin-top:14px;
  padding-inline-start:14px;
  border-inline-start:
    2px solid
    color-mix(
      in srgb,
      var(--pg-accent) 65%,
      transparent
    );
}

.mq-attract-copy strong{
  color:#d8fff2;
  font-size:
    clamp(
      1rem,
      1.35vw,
      1.28rem
    );
  font-weight:950;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.mq-attract-copy span{
  color:#8fb6aa;
  font-size:
    clamp(
      .76rem,
      1vw,
      .92rem
    );
  line-height:1.65;
  overflow-wrap:anywhere;
}

.mq-attract-shell
.mq-attract-visual{
  position:relative;
  isolation:isolate;
  box-shadow:
    0 24px 70px rgba(0,0,0,.24),
    0 0 0 1px
    color-mix(
      in srgb,
      var(--pg-accent) 5%,
      transparent
    );
}

.mq-attract-shell
.mq-attract-visual::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:-35%;
  background:
    linear-gradient(
      110deg,
      transparent 38%,
      rgba(255,255,255,.04) 45%,
      rgba(167,243,208,.16) 50%,
      rgba(255,255,255,.04) 55%,
      transparent 62%
    );
  transform:
    translate3d(-70%,0,0)
    rotate(8deg);
  pointer-events:none;
}

.mq-attract-shell
.mq-attract-visual.has-cover img{
  transform:scale(1);
  transform-origin:center;
  backface-visibility:hidden;
}

.mq-attract-shell
.mq-attract-cta{
  position:relative;
  overflow:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.mq-attract-shell
.mq-attract-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      110deg,
      transparent 30%,
      rgba(255,255,255,.2) 50%,
      transparent 70%
    );
  transform:translate3d(-120%,0,0);
  pointer-events:none;
}

.mq-attract-shell
.mq-attract-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

.mq-attract-shell
.mq-attract-cta:focus-visible{
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--pg-accent) 72%,
      #fff
    );
  outline-offset:4px;
}


/* ------------------------------------------------------------
   Motion level
   ------------------------------------------------------------ */

.mq-attract-shell{
  --mq-attract-reveal:.7s;
  --mq-attract-breathe:5.8s;
  --mq-attract-shine:5.4s;
  --mq-attract-pulse:2.7s;
  --mq-attract-scale:1.025;
}

.mq-attract-shell[
  data-mq-motion-level="subtle"
]{
  --mq-attract-reveal:.58s;
  --mq-attract-breathe:7.5s;
  --mq-attract-shine:7.2s;
  --mq-attract-pulse:3.8s;
  --mq-attract-scale:1.012;
}

.mq-attract-shell[
  data-mq-motion-level="strong"
]{
  --mq-attract-reveal:.82s;
  --mq-attract-breathe:4.6s;
  --mq-attract-shine:4.1s;
  --mq-attract-pulse:2.15s;
  --mq-attract-scale:1.038;
}


/* ------------------------------------------------------------
   Sequential reveal
   ------------------------------------------------------------ */

.mq-attract-shell[
  data-mq-attract="1"
]:not(.is-mq-attract-ready):not(
  .is-mq-attract-static
)
.pg2-eyebrow,

.mq-attract-shell[
  data-mq-attract="1"
]:not(.is-mq-attract-ready):not(
  .is-mq-attract-static
)
.pg12-landing-copy h2,

.mq-attract-shell[
  data-mq-attract="1"
]:not(.is-mq-attract-ready):not(
  .is-mq-attract-static
)
.pg12-landing-copy>p,

.mq-attract-shell[
  data-mq-attract="1"
]:not(.is-mq-attract-ready):not(
  .is-mq-attract-static
)
.mq-attract-copy,

.mq-attract-shell[
  data-mq-attract="1"
]:not(.is-mq-attract-ready):not(
  .is-mq-attract-static
)
.pg12-landing-metrics,

.mq-attract-shell[
  data-mq-attract="1"
]:not(.is-mq-attract-ready):not(
  .is-mq-attract-static
)
.mq-attract-cta{
  opacity:0;
  transform:
    translate3d(0,14px,0);
}

.mq-attract-shell.is-mq-attract-ready
.pg2-eyebrow{
  animation:
    mqAttractReveal
    var(--mq-attract-reveal)
    cubic-bezier(.22,1,.36,1)
    both;
}

.mq-attract-shell.is-mq-attract-ready
.pg12-landing-copy h2{
  animation:
    mqAttractReveal
    var(--mq-attract-reveal)
    .10s
    cubic-bezier(.22,1,.36,1)
    both;
}

.mq-attract-shell.is-mq-attract-ready
.pg12-landing-copy>p{
  animation:
    mqAttractReveal
    var(--mq-attract-reveal)
    .20s
    cubic-bezier(.22,1,.36,1)
    both;
}

.mq-attract-shell.is-mq-attract-ready
.mq-attract-copy{
  animation:
    mqAttractReveal
    var(--mq-attract-reveal)
    .30s
    cubic-bezier(.22,1,.36,1)
    both;
}

.mq-attract-shell.is-mq-attract-ready
.pg12-landing-metrics{
  animation:
    mqAttractReveal
    var(--mq-attract-reveal)
    .38s
    cubic-bezier(.22,1,.36,1)
    both;
}

.mq-attract-shell.is-mq-attract-ready
.mq-attract-cta{
  animation:
    mqAttractReveal
      var(--mq-attract-reveal)
      .48s
      cubic-bezier(.22,1,.36,1)
      both,
    mqAttractCtaPulse
      var(--mq-attract-pulse)
      1.4s
      ease-in-out
      infinite;
}

.mq-attract-shell.is-mq-attract-ready
.mq-attract-visual.has-cover img{
  animation:
    mqAttractVisualBreath
    var(--mq-attract-breathe)
    ease-in-out
    infinite;
}

.mq-attract-shell.is-mq-attract-ready
.mq-attract-visual::after{
  animation:
    mqAttractShine
    var(--mq-attract-shine)
    1s
    ease-in-out
    infinite;
}

.mq-attract-shell.is-mq-attract-ready
.mq-attract-copy{
  filter:
    drop-shadow(
      0 0 14px
      color-mix(
        in srgb,
        var(--pg-accent) 10%,
        transparent
      )
    );
}


/* ------------------------------------------------------------
   Explicit kiosk mode
   ------------------------------------------------------------ */

.mq-attract-shell[
  data-mq-kiosk="1"
]{
  min-height:100dvh;
  overscroll-behavior:none;
}

.mq-attract-shell[
  data-mq-kiosk="1"
]
.mq-attract-landing{
  margin-top:
    clamp(
      10px,
      1.2dvh,
      20px
    );
}


/* ------------------------------------------------------------
   Portrait / kiosk / tablet
   Explicit orientation contract; not resolution-only kiosk detection.
   ------------------------------------------------------------ */

@media (orientation:portrait){
  .mq-attract-shell
  .mq-attract-landing{
    grid-template-columns:1fr;
    gap:
      clamp(
        12px,
        2dvh,
        28px
      );
    align-content:start;
  }

  .mq-attract-shell
  .pg12-landing-copy{
    width:min(980px,100%);
    margin-inline:auto;
    padding:
      clamp(
        14px,
        2.2dvh,
        34px
      )
      clamp(
        10px,
        2vw,
        30px
      );
  }

  .mq-attract-shell
  .mq-attract-visual{
    order:2;
    width:min(980px,100%);
    height:
      clamp(
        280px,
        39dvh,
        720px
      );
    min-height:0;
    margin-inline:auto;
  }

  .mq-attract-shell
  .mq-attract-visual img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
  }
}


/* 1080x1920 / 2160x3840 portrait kiosk family */
@media (
  orientation:portrait
) and (min-height:1200px){

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-brandbar{
    max-width:1180px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-landing{
    width:min(1180px,100%);
    min-height:
      calc(
        100dvh -
        clamp(130px,11dvh,240px)
      )!important;
    padding:
      clamp(
        18px,
        2.2dvh,
        44px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-copy{
    text-align:center;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-copy>p{
    max-width:900px;
    margin-inline:auto;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-copy{
    width:min(820px,100%);
    margin-inline:auto;
    padding-inline:0;
    border-inline-start:0;
    text-align:center;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-metrics{
    width:min(900px,100%);
    margin-inline:auto;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-cta{
    width:min(900px,100%);
    margin-inline:auto;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-visual{
    height:
      clamp(
        420px,
        38dvh,
        1100px
      );
  }
}


/* ------------------------------------------------------------
   Landscape desktop / tablet
   ------------------------------------------------------------ */

@media (
  orientation:landscape
) and (min-width:961px){

  .mq-attract-shell
  .mq-attract-landing{
    grid-template-columns:
      minmax(0,1.08fr)
      minmax(340px,.92fr);
  }

  .mq-attract-shell
  .mq-attract-visual{
    order:initial;
  }
}


/* ------------------------------------------------------------
   Medium / mobile
   ------------------------------------------------------------ */

@media(max-width:960px){
  .mq-attract-shell{
    padding-top:
      max(
        8px,
        env(safe-area-inset-top)
      );
    padding-right:
      max(
        8px,
        env(safe-area-inset-right)
      );
    padding-bottom:
      max(
        14px,
        env(safe-area-inset-bottom)
      );
    padding-left:
      max(
        8px,
        env(safe-area-inset-left)
      );
  }

  .mq-attract-shell
  .pg12-brandbar{
    padding:12px 14px;
  }

  .mq-attract-shell
  .pg2-brandbar__logos{
    justify-content:center;
  }

  .mq-attract-shell
  .mq-attract-landing{
    min-height:auto!important;
  }

  .mq-attract-shell
  .mq-attract-visual{
    min-height:240px;
  }
}


@media(max-width:600px){
  .mq-attract-shell
  .pg2-brandbar__logos{
    display:grid;
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
    gap:6px;
    width:100%;
  }

  .mq-attract-shell
  .pg2-logo{
    width:100%;
    max-width:none!important;
    height:54px;
    padding:5px 7px;
    border-radius:12px;
  }

  .mq-attract-shell
  .pg2-logo img{
    height:
      min(
        var(--logo-height),
        38px
      );
  }

  .mq-attract-shell
  .pg12-landing-copy{
    padding:10px 6px 4px;
  }

  .mq-attract-copy{
    margin-top:9px;
    padding-inline-start:10px;
  }

  .mq-attract-shell
  .pg12-landing-metrics{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .mq-attract-shell
  .mq-attract-visual{
    height:auto;
    min-height:220px;
  }

  .mq-attract-shell
  .mq-attract-visual img{
    height:auto;
    max-height:340px;
  }
}


/* ------------------------------------------------------------
   Touch targets
   ------------------------------------------------------------ */

@media(pointer:coarse){
  .mq-attract-shell
  .mq-attract-cta{
    min-height:60px;
  }

  .mq-attract-shell
  .pg2-icon-button,
  .mq-attract-shell
  .pg2-secondary-action{
    min-height:48px;
  }
}


/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

  .mq-attract-shell *,
  .mq-attract-shell *::before,
  .mq-attract-shell *::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition-duration:.01ms!important;
  }

  .mq-attract-shell
  .pg2-eyebrow,

  .mq-attract-shell
  .pg12-landing-copy h2,

  .mq-attract-shell
  .pg12-landing-copy>p,

  .mq-attract-shell
  .mq-attract-copy,

  .mq-attract-shell
  .pg12-landing-metrics,

  .mq-attract-shell
  .mq-attract-cta{
    opacity:1!important;
    transform:none!important;
  }

  .mq-attract-shell
  .mq-attract-visual.has-cover img{
    transform:none!important;
  }

  .mq-attract-shell
  .mq-attract-visual::after{
    display:none;
  }
}


/* ------------------------------------------------------------
   GPU-friendly keyframes: transform / opacity only
   ------------------------------------------------------------ */

@keyframes mqAttractReveal{
  from{
    opacity:0;
    transform:
      translate3d(
        0,
        14px,
        0
      );
  }

  to{
    opacity:1;
    transform:
      translate3d(
        0,
        0,
        0
      );
  }
}

@keyframes mqAttractVisualBreath{
  0%,
  100%{
    transform:scale(1);
  }

  50%{
    transform:
      scale(
        var(--mq-attract-scale)
      );
  }
}

@keyframes mqAttractShine{
  0%,
  62%{
    opacity:0;
    transform:
      translate3d(
        -70%,
        0,
        0
      )
      rotate(8deg);
  }

  72%{
    opacity:.9;
  }

  86%{
    opacity:0;
    transform:
      translate3d(
        70%,
        0,
        0
      )
      rotate(8deg);
  }

  100%{
    opacity:0;
    transform:
      translate3d(
        70%,
        0,
        0
      )
      rotate(8deg);
  }
}

@keyframes mqAttractCtaPulse{
  0%,
  100%{
    box-shadow:
      0 14px 34px
      color-mix(
        in srgb,
        var(--pg-accent) 20%,
        transparent
      );
  }

  50%{
    box-shadow:
      0 18px 44px
      color-mix(
        in srgb,
        var(--pg-accent) 34%,
        transparent
      );
  }
}


/* ================================================================
   MQ-5E - Visual acceptance hardening
   Mobile overflow + native high-resolution kiosk scaling
   ================================================================ */

.mq-attract-shell{
  box-sizing:border-box;
  width:100%;
  max-width:100vw;
}

.mq-attract-shell .pg12-brandbar,
.mq-attract-shell .mq-attract-landing,
.mq-attract-shell .pg12-landing-copy,
.mq-attract-shell .mq-attract-visual,
.mq-attract-shell .pg12-landing-metrics{
  min-width:0;
}


/* ------------------------------------------------------------
   Portrait kiosk:
   Do not stretch the bordered landing card to empty viewport space.
   The shell itself remains full-height.
   ------------------------------------------------------------ */

@media (
  orientation:portrait
) and (min-height:1200px){

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-landing{
    min-height:auto!important;
  }
}


/* ------------------------------------------------------------
   Native 2160x3840-class explicit kiosk scaling.
   Kiosk mode remains explicit via data-mq-kiosk.
   ------------------------------------------------------------ */

@media (
  orientation:portrait
) and (min-width:1600px) and (min-height:2800px){

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]{
    padding:
      clamp(
        34px,
        2.4vw,
        62px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-brandbar{
    width:
      min(
        1960px,
        calc(100vw - 120px)
      );
    max-width:none;
    grid-template-columns:
      minmax(320px,.9fr)
      minmax(720px,1.5fr)
      minmax(320px,.9fr);
    gap:32px;
    padding:28px 38px;
    border-radius:34px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-brandbar
  .pg2-brandbar__copy h1{
    font-size:
      clamp(
        48px,
        2.7vw,
        68px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-brandbar
  .pg2-brandbar__copy p{
    font-size:
      clamp(
        20px,
        1.1vw,
        28px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-brandbar
  .pg2-brandbar__copy>span{
    font-size:
      clamp(
        18px,
        .9vw,
        25px
      );
    padding:9px 16px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg2-logo{
    height:
      clamp(
        105px,
        6vw,
        138px
      );
    min-width:0!important;
    max-width:230px!important;
    padding:12px 16px;
    border-radius:22px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg2-logo img{
    height:
      min(
        var(--logo-height),
        92px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg2-icon-button,
  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg2-secondary-action{
    min-height:70px;
    padding:15px 23px;
    font-size:20px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-landing{
    width:
      min(
        1960px,
        calc(100vw - 120px)
      );
    max-width:none;
    min-height:auto!important;
    padding:
      clamp(
        48px,
        2.8vw,
        84px
      );
    gap:
      clamp(
        30px,
        2.2dvh,
        70px
      );
    border-radius:38px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-copy{
    width:min(1700px,100%);
    padding:
      34px
      46px
      20px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg2-eyebrow{
    font-size:
      clamp(
        18px,
        1vw,
        26px
      );
    padding:9px 17px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-copy h2{
    font-size:
      clamp(
        60px,
        3.6vw,
        92px
      );
    margin:20px 0 14px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-copy>p{
    max-width:1500px;
    font-size:
      clamp(
        22px,
        1.3vw,
        32px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-metrics{
    width:min(1600px,100%);
    gap:18px;
    margin:
      34px
      auto
      26px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-metrics article{
    min-height:150px;
    padding:20px;
    border-radius:22px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-metrics span,
  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-metrics small{
    font-size:
      clamp(
        15px,
        .8vw,
        21px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .pg12-landing-metrics strong{
    font-size:
      clamp(
        27px,
        1.5vw,
        40px
      );
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-cta{
    width:min(1600px,100%);
    min-height:92px;
    font-size:
      clamp(
        24px,
        1.4vw,
        34px
      );
    border-radius:22px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-visual{
    width:min(1760px,100%);
    height:
      clamp(
        900px,
        31dvh,
        1260px
      );
    min-height:0;
    border-radius:32px;
  }

  .mq-attract-shell[
    data-mq-kiosk="1"
  ]
  .mq-attract-visual img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:none;
    object-fit:contain;
  }
}


/* ------------------------------------------------------------
   Mobile width hardening.
   Prevent any shared public-game minimum from widening the page.
   ------------------------------------------------------------ */

@media(max-width:600px){

  .mq-attract-shell{
    width:100%;
    max-width:100vw;
    min-width:0;
    overflow-x:hidden;
  }

  .mq-attract-shell
  .pg12-brandbar{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:
      minmax(0,1fr)!important;
  }

  .mq-attract-shell
  .pg12-brandbar>*,
  .mq-attract-shell
  .pg2-brandbar__copy,
  .mq-attract-shell
  .pg2-brandbar__logos,
  .mq-attract-shell
  .pg2-brandbar__actions{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .mq-attract-shell
  .pg2-brandbar__logos{
    display:grid;
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
    gap:6px;
    overflow:hidden;
  }

  .mq-attract-shell
  .pg2-logo{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .mq-attract-shell
  .pg2-brandbar__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }

  .mq-attract-shell
  .pg2-icon-button,
  .mq-attract-shell
  .pg2-secondary-action{
    max-width:100%;
  }

  .mq-attract-shell
  .mq-attract-landing{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:
      minmax(0,1fr)!important;
  }

  .mq-attract-shell
  .pg12-landing-copy{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }

  .mq-attract-shell
  .pg12-landing-copy h2,
  .mq-attract-shell
  .pg12-landing-copy>p,
  .mq-attract-shell
  .pg12-landing-metrics strong,
  .mq-attract-shell
  .pg12-landing-metrics span,
  .mq-attract-shell
  .pg12-landing-metrics small{
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
  }

  .mq-attract-shell
  .pg12-landing-metrics{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .mq-attract-shell
  .pg12-landing-metrics article{
    min-width:0;
    overflow:hidden;
  }

  .mq-attract-shell
  .mq-attract-cta{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .mq-attract-shell
  .mq-attract-visual{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }

  .mq-attract-shell
  .mq-attract-visual img{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}