/* V128 — final mobile stability layer
   Loaded last on every page to neutralize accumulated legacy mobile overrides. */

@media (max-width: 640px){
  html,body{
    max-width:100%!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,canvas{max-width:100%;height:auto}

  /* Shared content width: one mobile rhythm across homepage/subpages/footer. */
  .wrap,.narrow,
  .hero-experience .product-section.beauty-focus>.wrap,
  .hero-experience .core-tech-inner,
  .hero-experience .pricing>.wrap,
  .hero-experience #faq>.wrap,
  .footer.footer-saas>.wrap{
    width:calc(100% - 28px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Never allow marketing headings to create horizontal overflow. */
  h1,h2,h3,h4,h5,h6,
  .marketing-title,
  .product-head h2,
  .core-tech-head h2,
  .pricing .head h2,
  #faq .head h2,
  .page-hero h1{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow:visible!important;
    text-indent:0!important;
  }

  /* Japanese / Chinese: CJK may wrap naturally, Latin tokens such as OBS stay intact. */
  html[lang^="ja"] :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1),
  body.lang-ja :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1),
  html[lang^="zh"] :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1),
  body.lang-zh :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1){
    line-break:strict!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-wrap:wrap!important;
  }
  /* Korean: keep words together, but permit an emergency wrap rather than overflow. */
  html[lang^="ko"] :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1),
  body.lang-ko :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1){
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
    text-wrap:wrap!important;
  }
  /* English: normal word wrapping, no mid-word hyphenation. */
  html[lang^="en"] :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1),
  body.lang-en :is(h1,h2,h3,h4,h5,h6,.marketing-title,.product-card h3,.page-hero h1){
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
    text-wrap:wrap!important;
  }

  /* Homepage section typography: intentionally smaller and more predictable on phones. */
  .hero-experience .product-head,
  .hero-experience .core-tech-head,
  .hero-experience .pricing .head,
  .hero-experience #faq .head{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero-experience .product-head h2,
  .hero-experience .core-tech-head h2,
  .hero-experience .pricing .head h2,
  .hero-experience #faq .head h2{
    font-size:clamp(25px,7.1vw,28px)!important;
    line-height:1.36!important;
    letter-spacing:-.025em!important;
    margin-top:0!important;
    margin-bottom:14px!important;
  }
  .hero-experience .product-head p,
  .hero-experience .core-tech-copy p,
  .hero-experience .pricing .head p,
  .hero-experience #faq .head p{
    font-size:14px!important;
    line-height:1.85!important;
    letter-spacing:0!important;
  }

  /* Beauty / native OBS workflow */
  .hero-experience .product-section.beauty-focus{
    overflow:hidden!important;
  }
  .hero-experience .product-grid.product-grid-with-native-flow{
    width:100%!important;
    min-width:0!important;
  }
  .hero-experience .product-grid-with-native-flow .product-card-native-flow{
    width:100%!important;
    min-width:0!important;
    padding:24px 16px 20px!important;
    overflow:hidden!important;
  }
  .hero-experience .product-card-native-flow>h3{
    width:100%!important;
    max-width:330px!important;
    margin:0 auto!important;
    padding:0 2px!important;
    font-size:clamp(19px,5.4vw,22px)!important;
    line-height:1.48!important;
    letter-spacing:-.018em!important;
  }
  .hero-experience .product-card-native-flow>.native-workflow{
    width:100%!important;
    min-width:0!important;
    margin-top:24px!important;
  }
  .hero-experience .native-workflow-row{
    width:100%!important;
    min-width:0!important;
    padding:14px 10px!important;
  }
  .hero-experience .native-workflow-chain{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .hero-experience .native-workflow-chain span{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:10px 10px!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
  }
  .hero-experience .product-card-native-flow>.hero-preview-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-top:20px!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .hero-experience .product-card-native-flow>.hero-preview-wrap>div,
  .hero-experience .product-card-native-flow>.hero-preview-wrap .skiin-preview{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Core Technology: the section that was visibly overflowing on iPhone. */
  .hero-experience .core-technology{
    width:100%!important;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow:hidden!important;
  }
  .hero-experience .core-tech-inner{
    min-width:0!important;
  }
  .hero-experience .core-tech-head h2{
    max-width:340px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero-experience .core-tech-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    columns:1!important;
    column-count:1!important;
    column-rule:0!important;
    text-align:left!important;
  }
  .hero-experience .core-tech-copy p{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 20px!important;
    text-align:left!important;
  }
  .hero-experience .core-tech-copy p:last-child{margin-bottom:0!important}
  .hero-experience .core-tech-pillars,
  .hero-experience .core-tech-capabilities{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
  }
  .hero-experience .core-tech-pillars span,
  .hero-experience .core-tech-capabilities span{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Pricing: no fixed-width child may exceed the phone viewport. */
  .hero-experience .compact-pricing-grid,
  .hero-experience .compact-pricecard,
  .hero-experience .compact-pricecard .pricing-value-grid,
  .hero-experience .compact-pricecard .pricing-value-item{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .hero-experience .compact-pricecard{
    padding:22px 14px 20px!important;
  }
  .hero-experience .compact-pricecard .pricing-value-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .hero-experience .compact-pricecard .pricing-value-item{
    min-height:0!important;
    padding:17px 16px!important;
  }
  .hero-experience .compact-pricecard .pricing-value-item strong{
    max-width:100%!important;
    font-size:16px!important;
    line-height:1.5!important;
    white-space:normal!important;
  }
  html[lang^="ja"] .hero-experience .compact-pricecard .pricing-value-item strong,
  html[lang^="zh"] .hero-experience .compact-pricecard .pricing-value-item strong{
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
  }
  html[lang^="ko"] .hero-experience .compact-pricecard .pricing-value-item strong{
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
  }
  .hero-experience .compact-pricecard>.btn.primary.full-width{
    width:100%!important;
    max-width:300px!important;
    min-width:0!important;
  }
  .hero-experience .trial-payment-note{
    width:100%!important;
    max-width:100%!important;
    padding:0 2px!important;
  }

  /* FAQ */
  .hero-experience #faq .faq,
  .hero-experience #faq .faq details{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .hero-experience #faq .faq summary{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:15px 48px 15px 16px!important;
    font-size:14px!important;
    line-height:1.55!important;
    white-space:normal!important;
  }
  .hero-experience #faq .faq details p{
    width:100%!important;
    max-width:100%!important;
    padding:0 16px 18px!important;
    font-size:13.5px!important;
    line-height:1.78!important;
  }

  /* Subpages: contact / guide / privacy / thanks */
  .page-hero,.contact-section,.policy-wrap,.guide-shell,.thanks-hero{
    max-width:100%!important;
    overflow:hidden!important;
  }
  .page-hero h1,.thanks-card h1{
    font-size:clamp(28px,8vw,34px)!important;
    line-height:1.3!important;
    letter-spacing:-.025em!important;
  }
  .contact-card,.policy-card,.guide-empty-card,.thanks-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  input,select,textarea,button{max-width:100%!important}

  /* Footer: one calm column on phone-sized screens; no narrow two-column squeeze. */
  .footer.footer-saas{overflow:hidden!important}
  .footer-saas-top{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .footer-saas-brand{
    grid-column:auto!important;
    max-width:100%!important;
  }
  .footer-saas-column{min-width:0!important}
  .footer-saas-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
  }
  .footer.footer-saas .footer-brand-socials{
    max-width:100%!important;
    flex-wrap:wrap!important;
  }
}

@media (max-width: 380px){
  .hero-experience .product-head h2,
  .hero-experience .core-tech-head h2,
  .hero-experience .pricing .head h2,
  .hero-experience #faq .head h2{
    font-size:25px!important;
  }
  .hero-experience .product-card-native-flow>h3{
    font-size:19px!important;
  }
}