/* V129 — mobile typography & spacing polish */
.nowrap{white-space:nowrap!important}

/* Prefer calmer phrase-level wrapping where supported. */
html[lang="ja-JP"] :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2),
body.lang-ja :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2){
  word-break:normal!important;
  word-break:auto-phrase!important;
  overflow-wrap:normal!important;
  line-break:strict!important;
}
html[lang="zh-CN"] :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2),
body.lang-zh :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2){
  word-break:normal!important;
  word-break:auto-phrase!important;
  overflow-wrap:normal!important;
  line-break:strict!important;
}
html[lang="ko-KR"] :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2),
body.lang-ko :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2){
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}
html[lang^="en"] :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2),
body.lang-en :is(h1,h2,h3,h4,h5,h6,p,li,summary,button,label,.native-workflow-label,.native-workflow-chain span,.skdemo-tab-hint,.pricing-value-item strong,.page-hero h1,.thanks-card h1,.policy-card h1,.policy-card h2){
  word-break:normal!important;
  overflow-wrap:normal!important;
}

@media (max-width:640px){
  /* Slightly reduce empty vertical space between major home sections on phone. */
  .hero-experience :is(.product-section.beauty-focus,.core-technology,#faq,.pricing){
    padding-top:42px!important;
    padding-bottom:42px!important;
  }

  /* Native workflow card: let the title breathe and keep OBS intact. */
  .hero-experience .product-grid-with-native-flow .product-card-native-flow{
    padding:20px 12px 16px!important;
  }
  .hero-experience .product-card-native-flow>h3{
    max-width:100%!important;
    padding:0 10px!important;
    font-size:clamp(17px,5.7vw,20px)!important;
    line-height:1.5!important;
    text-wrap:pretty!important;
    overflow-wrap:normal!important;
  }
  .hero-experience .product-card-native-flow>.native-workflow{margin-top:18px!important}
  .hero-experience .native-workflow-row{padding:12px 10px!important}
  .hero-experience .native-workflow-label{font-size:13px!important;line-height:1.35!important}
  .hero-experience .native-workflow-chain span{
    padding:10px 8px!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    text-align:center!important;
  }
  .hero-experience .product-card-native-flow>.hero-preview-wrap{margin-top:14px!important}

  /* Preview area: more relaxed top spacing and tabs that actually fit on phone widths. */
  .hero-experience .skiin-preview .skdemo-preview-body{padding:16px 12px 14px!important}
  .hero-experience .skiin-preview .skdemo-tab-hint{
    margin-bottom:14px!important;
    font-size:11.5px!important;
    line-height:1.6!important;
    text-align:center!important;
    text-wrap:pretty!important;
  }
  .hero-experience .skiin-preview .skdemo-tabs{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    overflow:visible!important;
    white-space:normal!important;
    margin-bottom:14px!important;
  }
  .hero-experience .skiin-preview .skdemo-tab{
    min-width:0!important;
    padding:10px 2px!important;
    font-size:11px!important;
    line-height:1.25!important;
    border-radius:14px!important;
    white-space:nowrap!important;
  }

  /* Core Technology: wider readable copy and no giant overscaled heading. */
  .hero-experience .core-tech-inner{width:calc(100% - 24px)!important}
  .hero-experience .core-tech-head h2{
    max-width:100%!important;
    font-size:clamp(24px,7.2vw,29px)!important;
    line-height:1.34!important;
    text-wrap:pretty!important;
  }
  .hero-experience .core-tech-copy p{
    font-size:13px!important;
    line-height:1.88!important;
  }

  /* Pricing titles and FAQ text: avoid ugly one-character CJK wraps. */
  .hero-experience .compact-pricecard .pricing-value-item strong,
  .hero-experience #faq .faq summary,
  .hero-experience #faq .faq details p{
    text-wrap:pretty!important;
  }

  /* Subpages: keep mobile heroes and cards readable across all locales. */
  .page-hero h1,.thanks-card h1,.guide-empty-title,.policy-card h1{
    text-wrap:pretty!important;
  }
  .page-hero p,.thanks-card p,.guide-empty-copy,.policy-card p,.policy-card li{
    font-size:14px!important;
    line-height:1.85!important;
    text-wrap:pretty!important;
  }
}

@media (max-width:390px){
  .hero-experience .skiin-preview .skdemo-tab{font-size:10.5px!important}
  .hero-experience .native-workflow-chain span{font-size:11px!important}
}