/* V282 — homepage localization parity across all 12 languages.
   Keeps the Japanese homepage structure while preserving script-appropriate fonts,
   consistent section-heading metrics, and stable Arabic layout geometry. */

/* Script-aware heading families: same visual role, appropriate glyph set. */
html[lang="ja-JP"] :is(#beauty .product-head h2,#beauty .jp-preview-title,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2){font-family:"Noto Sans JP",Inter,sans-serif!important}
html[lang="zh-CN"] :is(#beauty .product-head h2,#beauty .jp-preview-title,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2){font-family:"Noto Sans SC",Inter,sans-serif!important}
html[lang="ko-KR"] :is(#beauty .product-head h2,#beauty .jp-preview-title,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2){font-family:"Noto Sans KR",Inter,sans-serif!important}
html[lang="ar"] :is(#beauty .product-head h2,#beauty .jp-preview-title,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2){font-family:"Noto Sans Arabic",Inter,sans-serif!important}
html[lang="th"] :is(#beauty .product-head h2,#beauty .jp-preview-title,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2){font-family:"Noto Sans Thai",Inter,sans-serif!important}
html:not([lang="ja-JP"]):not([lang="zh-CN"]):not([lang="ko-KR"]):not([lang="ar"]):not([lang="th"]) :is(#beauty .product-head h2,#beauty .jp-preview-title,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2){font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}

/* The six major homepage section headings use one shared visual specification. */
.hero-experience :is(
  #beauty .product-head h2,
  #streaming-scenarios .jp-scenario-head h2,
  #comparison .jp-conversion-head h2,
  #core-technology .marketing-title,
  #pricing .marketing-title,
  #faq > .wrap > .head h2
){
  margin-top:0!important;
  font-size:clamp(30px,3vw,40px)!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  text-align:center!important;
  text-wrap:balance;
}

/* Preview title is deliberately one level smaller, but identical across locales. */
.hero-experience #beauty .product-card-native-flow > .jp-preview-title{
  display:block!important;
  width:100%!important;
  max-width:820px!important;
  box-sizing:border-box!important;
  margin:0 auto 14px!important;
  padding-inline:16px!important;
  font-size:19px!important;
  line-height:1.4!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  text-align:center!important;
  text-wrap:balance;
}

/* New hero support line from the Japanese homepage. */
.hero-experience .jp-hero-subcopy{
  max-width:820px;
  margin:26px auto 0;
  padding:0 24px;
  text-align:center;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.8;
  font-weight:500;
  color:#64748b;
  text-wrap:balance;
}

/* Direct-in-OBS workflow: same geometry for every locale. */
.hero-experience section#beauty{
  padding-top:58px!important;
  padding-bottom:58px!important;
}
.hero-experience section#beauty .product-head{
  margin-bottom:22px!important;
  text-align:center!important;
}
.hero-experience section#beauty .jp-simple-flow{
  max-width:980px!important;
  margin:0 auto 28px!important;
  padding:18px!important;
  border-radius:20px!important;
}
.hero-experience section#beauty .jp-simple-flow .native-workflow{
  gap:10px!important;
  margin:0!important;
  padding-top:0!important;
  border-top:none!important;
}
.hero-experience section#beauty .native-workflow-row{
  display:grid!important;
  grid-template-columns:140px auto!important;
  justify-content:center!important;
  align-items:center!important;
  gap:16px!important;
  min-height:58px!important;
  padding:11px 16px!important;
  border-radius:14px!important;
}
.hero-experience section#beauty .native-workflow-label{
  min-width:0!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:800!important;
  text-align:center!important;
}
.hero-experience section#beauty .native-workflow-chain{
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
.hero-experience section#beauty .native-workflow-chain span{
  min-height:38px!important;
  padding:8px 12px!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.hero-experience section#beauty .product-grid.product-grid-with-native-flow{
  grid-template-columns:1fr!important;
  margin-top:0!important;
}
.hero-experience section#beauty .product-card-native-flow{
  width:100%!important;
  padding-top:10px!important;
  padding-bottom:18px!important;
}
.hero-experience section#beauty .product-card-native-flow > .hero-preview-wrap{
  width:100%!important;
  max-width:820px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:16px!important;
  padding-right:16px!important;
}
.hero-experience section#beauty .product-card-native-flow > .hero-preview-wrap > div{width:100%!important}

/* Streaming-style section added in the Japanese homepage. */
.hero-experience .jp-streaming-scenarios{
  padding:76px 0 68px;
  background:#fff;
}
.hero-experience .jp-streaming-scenarios .wrap{max-width:1040px}
.hero-experience .jp-scenario-head{
  max-width:900px;
  margin:0 auto 34px;
  text-align:center;
}
.hero-experience .jp-scenario-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
}
.hero-experience .jp-scenario-card{
  min-height:0;
  padding:30px 38px 32px;
  background:transparent;
}
.hero-experience .jp-scenario-card + .jp-scenario-card{border-left:1px solid #e2e8f0}
.hero-experience .jp-scenario-type{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.45;
  font-weight:700;
  color:#2563eb;
}
.hero-experience .jp-scenario-card h3{
  margin:0 0 14px;
  font-size:23px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:-.02em;
  color:#0f172a;
}
.hero-experience .jp-scenario-card p:last-child{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:#475569;
}

/* Capability grid in pricing. */
.hero-experience .pcv256-main .jp-offer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.hero-experience .pcv256-main .jp-offer-card{
  border:1px solid rgba(209,220,235,.95);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.72);
  text-align:left;
}
.hero-experience .pcv256-main .jp-offer-card h4{
  margin:0 0 6px;
  font-size:15px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:-.01em;
}
.hero-experience .pcv256-main .jp-offer-card p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#506070;
}
.hero-experience .pcv256-main .pcv256-download{
  display:block!important;
  width:min(76%,760px)!important;
  margin:28px auto 8px!important;
}

/* Arabic: keep document semantics RTL, but do not mirror product/UI geometry. */
html[lang="ar"] .hero-experience :is(.hero-copy-center,.jp-hero-subcopy,.jp-scenario-head,.jp-conversion-head){direction:rtl!important}
html[lang="ar"] .hero-experience :is(.jp-scenario-grid,.core-tech-pillars,.core-tech-tags-unified,.jp-offer-grid,.pcv256-tabs){direction:ltr!important}
html[lang="ar"] .hero-experience :is(.jp-scenario-card,.core-tech-pillar,.jp-offer-card){direction:rtl!important;text-align:right!important}
html[lang="ar"] .hero-experience .jp-scenario-card + .jp-scenario-card{border-left:1px solid #e2e8f0!important;border-right:0!important}
html[lang="ar"] .hero-experience .core-tech-tags-unified > span{direction:rtl!important;unicode-bidi:plaintext!important}
html[lang="ar"] .hero-experience .pcv256-tab{direction:rtl!important;unicode-bidi:plaintext!important}
html[lang="ar"] .hero-experience .pcv256-price-line{direction:ltr!important}
html[lang="ar"] .hero-experience .pcv256-unit{direction:rtl!important;unicode-bidi:isolate!important}
html[lang="ar"] .hero-experience .jp-offer-card h4,
html[lang="ar"] .hero-experience .jp-offer-card p,
html[lang="ar"] .hero-experience .jp-scenario-card h3,
html[lang="ar"] .hero-experience .jp-scenario-card p{unicode-bidi:plaintext!important}
html[lang="ar"] .hero-experience :is(.tech-ltr,bdi[dir="ltr"]){direction:ltr!important;unicode-bidi:isolate!important}

@media(max-width:900px){
  .hero-experience .pcv256-main .pcv256-download{width:min(84%,680px)!important;margin-top:24px!important}
}

@media(max-width:760px){
  .hero-experience :is(
    #beauty .product-head h2,
    #streaming-scenarios .jp-scenario-head h2,
    #comparison .jp-conversion-head h2,
    #core-technology .marketing-title,
    #pricing .marketing-title,
    #faq > .wrap > .head h2
  ){
    font-size:28px!important;
    line-height:1.32!important;
    letter-spacing:-.02em!important;
    text-align:center!important;
  }
  .hero-experience .jp-hero-subcopy{
    margin-top:18px;
    padding:0 20px;
    font-size:14px;
    line-height:1.75;
  }
  .hero-experience section#beauty{padding-top:42px!important;padding-bottom:42px!important}
  .hero-experience section#beauty .product-head{margin-bottom:16px!important}
  .hero-experience section#beauty .jp-simple-flow{margin-bottom:18px!important;padding:12px!important;border-radius:16px!important}
  .hero-experience section#beauty .native-workflow-row{grid-template-columns:1fr!important;justify-content:stretch!important;gap:7px!important;padding:11px 10px!important}
  .hero-experience section#beauty .native-workflow-chain{justify-content:center!important;gap:5px!important;flex-wrap:wrap!important}
  .hero-experience section#beauty .native-workflow-chain span{min-height:34px!important;padding:7px 8px!important;font-size:11.5px!important}
  .hero-experience #beauty .product-card-native-flow > .jp-preview-title{font-size:17px!important;margin-bottom:10px!important;padding-inline:8px!important}
  .hero-experience section#beauty .product-card-native-flow > .hero-preview-wrap{max-width:none!important;padding-inline:8px!important}
  .hero-experience .jp-streaming-scenarios{padding:58px 0 50px}
  .hero-experience .jp-scenario-head{margin-bottom:24px;text-align:center}
  .hero-experience .jp-scenario-grid{grid-template-columns:1fr}
  .hero-experience .jp-scenario-card{padding:25px 2px 26px}
  .hero-experience .jp-scenario-card + .jp-scenario-card{border-left:0;border-top:1px solid #e2e8f0}
  .hero-experience .jp-scenario-card h3{font-size:21px}
  .hero-experience .pcv256-main .jp-offer-grid{grid-template-columns:1fr;gap:10px}
  .hero-experience .pcv256-main .jp-offer-card{padding:13px 14px;border-radius:14px}
  .hero-experience .pcv256-main .jp-offer-card h4{font-size:14px}
  .hero-experience .pcv256-main .jp-offer-card p{font-size:12.5px;line-height:1.55}
  .hero-experience .pcv256-main .pcv256-download{width:100%!important;margin-top:22px!important}
  html[lang="ar"] .hero-experience .jp-scenario-card + .jp-scenario-card{border-left:0!important;border-top:1px solid #e2e8f0!important}
}

/* Avoid forced shrinking of the localized section headings: wrap naturally instead. */
.hero-experience :is(#beauty .product-head h2,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2,#beauty .jp-preview-title){
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
html[lang="ja-JP"] .hero-experience :is(#beauty .product-head h2,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2,#beauty .jp-preview-title),
html[lang="ko-KR"] .hero-experience :is(#beauty .product-head h2,#streaming-scenarios .jp-scenario-head h2,#comparison .jp-conversion-head h2,#core-technology .marketing-title,#pricing .marketing-title,#faq > .wrap > .head h2,#beauty .jp-preview-title){word-break:keep-all!important}

/* Localized hero lines may wrap inside the authored mobile breaks if a translation is long. */
@media(max-width:640px){
  html:not([lang="ja-JP"]) .hero-experience .hero h1 .hero-title-line{
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance!important;
  }
  html[lang="ko-KR"] .hero-experience .hero h1 .hero-title-line{word-break:keep-all!important}
}

/* Extra physical-order lock for Arabic header in browsers with aggressive RTL flex inheritance. */
html[lang="ar"] header.nav > .wrap.navin,
html[lang="ar"] header.nav .wrap.navin{
  direction:ltr!important;
  flex-direction:row!important;
}
html[lang="ar"] header.nav .brand{order:0!important}
html[lang="ar"] header.nav .right{order:1!important}
