/* ============================================================
   TELESCOP — AI VISIBILITY BENCHMARK
   MOBILE OVERFLOW FIX v10
============================================================ */


@media(max-width:650px){


/* ------------------------------------------------------------
   NEVER LET THE PAGE BECOME WIDER THAN THE VIEWPORT
------------------------------------------------------------ */

body.benchmark-page{
  width:100%;
  max-width:100%;

  overflow-x:hidden;
  overflow-x:clip;
}


body.benchmark-page main{
  width:100%;
  max-width:100%;

  overflow-x:hidden;
  overflow-x:clip;
}


body.benchmark-page *,
body.benchmark-page *::before,
body.benchmark-page *::after{
  box-sizing:border-box;
}


/* ------------------------------------------------------------
   MAIN CONTAINERS
------------------------------------------------------------ */

body.benchmark-page
.research-container{
  width:100%;
  max-width:100%;
}


/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */

body.benchmark-page
.benchmark-hero-grid,

body.benchmark-page
.benchmark-hero-grid > div,

body.benchmark-page
.benchmark-hero-value-card,

body.benchmark-page
.benchmark-engine-scope,

body.benchmark-page
.benchmark-hero-actions,

body.benchmark-page
.proof-strip{
  width:100%;
  max-width:100%;
  min-width:0;
}


body.benchmark-page
.benchmark-engine-chips{
  width:100%;
  max-width:100%;
}


/* ------------------------------------------------------------
   USE CASE CAROUSEL

   Keep the swipe effect, but the carousel itself
   no longer protrudes beyond the viewport.
------------------------------------------------------------ */

body.benchmark-page
.benchmark-use-cases{
  width:100%;
  max-width:100%;

  overflow:hidden;
}


body.benchmark-page
.benchmark-use-cases-grid{
  width:100% !important;
  max-width:100% !important;

  margin-left:0 !important;
  margin-right:0 !important;

  padding-left:0 !important;
  padding-right:0 !important;

  overflow-x:auto;

  overscroll-behavior-x:contain;

  scroll-snap-type:x mandatory;

  -webkit-overflow-scrolling:touch;
}


body.benchmark-page
.benchmark-use-case{
  flex:
    0 0 84% !important;

  width:84% !important;
  max-width:340px !important;

  min-width:0;

  scroll-snap-align:start;
}


/* ------------------------------------------------------------
   FOUR ECOSYSTEMS

   Important:
   scroll happens INSIDE the figure.
   The figure itself stays inside the viewport.
------------------------------------------------------------ */

body.benchmark-page
figure.benchmark-figure:has(
  img[src*="quattro-ecosistemi-ai.png"]
){
  width:100% !important;
  max-width:100% !important;

  margin-left:0 !important;
  margin-right:0 !important;

  padding-left:0 !important;
  padding-right:0 !important;
  padding-bottom:.7rem !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  overscroll-behavior-x:contain;

  -webkit-overflow-scrolling:touch;
}


body.benchmark-page
figure.benchmark-figure:has(
  img[src*="quattro-ecosistemi-ai.png"]
)::before{
  position:static !important;

  display:block;

  margin-bottom:.65rem;

  padding-left:.05rem;
}


body.benchmark-page
img[src*="quattro-ecosistemi-ai.png"]{
  display:block !important;

  width:680px !important;
  min-width:680px !important;
  max-width:none !important;

  margin:0 !important;
}


/* ------------------------------------------------------------
   NORMAL FIGURES / IMAGES
------------------------------------------------------------ */

body.benchmark-page
figure:not(
  :has(img[src*="quattro-ecosistemi-ai.png"])
){
  max-width:100%;
}


body.benchmark-page
figure:not(
  :has(img[src*="quattro-ecosistemi-ai.png"])
)
img{
  max-width:100%;
  height:auto;
}


/* ------------------------------------------------------------
   CONTENT CARDS
------------------------------------------------------------ */

body.benchmark-page
.problem-card,

body.benchmark-page
.benefit-card,

body.benchmark-page
.deliverable,

body.benchmark-page
.fit-card,

body.benchmark-page
.value-box,

body.benchmark-page
.benchmark-fit-compact-grid,

body.benchmark-page
.benchmark-form-investment,

body.benchmark-page
.benchmark-form{
  width:100%;
  max-width:100%;

  min-width:0;
}


/* ------------------------------------------------------------
   FORM
------------------------------------------------------------ */

body.benchmark-page
.benchmark-form input,

body.benchmark-page
.benchmark-form select,

body.benchmark-page
.benchmark-form textarea{
  width:100%;
  max-width:100%;

  min-width:0;
}


/* ------------------------------------------------------------
   TEXT SAFETY
------------------------------------------------------------ */

body.benchmark-page
h1,

body.benchmark-page
h2,

body.benchmark-page
h3,

body.benchmark-page
p,

body.benchmark-page
strong,

body.benchmark-page
small{
  overflow-wrap:break-word;
}


}


/* ------------------------------------------------------------
   EXTRA-NARROW DEVICES
------------------------------------------------------------ */

@media(max-width:360px){

  body.benchmark-page
  .benchmark-use-case{
    flex-basis:88% !important;
    width:88% !important;
  }

}