/* JUBAIL FINAL POLISH V8 - MOBILE, ALIGNMENT, READABILITY */
html,body{scroll-behavior:smooth;}
img{max-width:100%;height:auto;}

.jb-final-wrap{
  grid-template-columns:minmax(0,1fr) minmax(360px,.92fr) !important;
}
.jb-final-copy{
  max-width:720px !important;
}
.jb-final-copy h1{
  max-width:720px !important;
}
.jb-final-tv{
  max-width:560px !important;
}

/* Make TV box premium but not oversized */
.jb-final-tv{
  padding:12px !important;
  border-radius:30px !important;
}
.jb-final-tv img{
  border-radius:20px !important;
}

/* Section spacing consistency */
.section .head,
.head{
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.section article{
  overflow-wrap:break-word !important;
}

/* Section 4 image gap removal */
#experience .section4-tv-card{
  padding:10px !important;
  border-radius:28px !important;
}
#experience .section4-tv-ui-holder,
.section4-tv-ui-holder{
  width:100% !important;
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  padding:0 !important;
  margin:0 !important;
}
#experience .section4-tv-ui-img,
.section4-tv-ui-img,
.section4-tv-ui-holder img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}

/* FAQ readability */
.faq details{
  overflow:hidden !important;
}
.faq summary{
  line-height:1.45 !important;
}
.faq p{
  line-height:1.8 !important;
}

/* Footer active city and links remain readable */
.footer a,.footer p,.footer b{
  overflow-wrap:break-word !important;
}

@media(max-width:1100px){
  .jb-final-wrap{
    grid-template-columns:minmax(0,.98fr) minmax(320px,.92fr) !important;
    gap:30px !important;
  }
  .jb-final-copy h1{
    font-size:clamp(40px,4.6vw,64px) !important;
  }
  .jb-final-tv{
    max-width:520px !important;
  }
}

@media(max-width:950px){
  html,body{
    overflow-x:hidden !important;
  }
  .container{
    width:min(100% - 28px,1180px) !important;
    margin-inline:auto !important;
  }

  .jb-final-wrap{
    width:min(100% - 28px,430px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
    padding:26px 0 46px !important;
  }

  .jb-final-tv{
    order:-1 !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 auto 10px auto !important;
    padding:10px !important;
    border-radius:26px !important;
  }
  .jb-final-tv img{
    border-radius:18px !important;
  }

  .jb-final-copy,
  .jb-final-rtl .jb-final-copy{
    max-width:100% !important;
    text-align:center !important;
    margin-inline:auto !important;
  }
  .jb-final-tag{
    margin-left:auto !important;
    margin-right:auto !important;
    white-space:normal !important;
    text-align:center !important;
    max-width:100% !important;
    letter-spacing:.08em !important;
  }
  .jb-final-copy h1{
    text-align:center !important;
    font-size:clamp(32px,10vw,46px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .jb-final-copy p,
  .jb-final-trust{
    text-align:center !important;
    max-width:94% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:16px !important;
    line-height:1.75 !important;
  }
  .jb-final-actions,
  .actions{
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
  }
  .jb-final-btn,
  .actions .btn,
  .btn{
    width:100% !important;
    max-width:340px !important;
    justify-content:center !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .split{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:28px !important;
  }
  .head,
  .head h2,
  .head p,
  .section h2,
  .section p,
  .section article,
  .section article h3,
  .section article p{
    text-align:center !important;
  }
  .chip-row{
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    gap:8px !important;
  }
  .chip-row span{
    text-align:center !important;
    white-space:normal !important;
  }
  .grid,
  .grid.three,
  .grid.four{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .steps.numbered,
  .tv-demo,
  .tv-card,
  .section4-tv-card{
    width:100% !important;
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .steps.numbered span,
  .steps.numbered strong,
  .steps.numbered small,
  .steps.numbered p{
    text-align:center !important;
  }
  .steps.numbered span{
    align-items:center !important;
    justify-content:center !important;
  }
  .faq summary,
  .faq p{
    text-align:center !important;
  }
  .footer-grid{
    text-align:center !important;
  }
}

@media(max-width:560px){
  .container{
    width:min(100% - 24px,420px) !important;
  }
  .jb-final-copy h1{
    font-size:clamp(31px,10.5vw,42px) !important;
    line-height:1.09 !important;
  }
  .head h2,
  .section h2{
    font-size:clamp(28px,9vw,38px) !important;
    line-height:1.12 !important;
  }
  .hero-copy p,
  .jb-final-copy p,
  .section p,
  article p{
    font-size:15.5px !important;
    line-height:1.75 !important;
  }
}