/* Light copy surface for the seven product banners; retain source scenes and layout. */
:is(.hero-dark,.product-continuation) .product-hero{
  --banner-surface:#f2f7fd;
  --banner-marker-orange:#fc7442;
  background:var(--banner-surface);color:#243b59;
}
:is(.hero-dark,.product-continuation) .product-hero h1{color:#1d3554}
:is(.hero-dark,.product-continuation) .product-hero h1 .gradient{
  background:none;
  background-clip:border-box;-webkit-background-clip:border-box;color:inherit;
}
:is(.hero-dark,.product-continuation) .product-hero .hero-title-icon{
  filter:url(#productTitleIconFlat);background:none;box-shadow:none;
}
:is(.hero-dark,.product-continuation) .product-hero .hero-description{color:#445b76}
:is(.hero-dark,.product-continuation) .product-hero .hero-questions-label{color:var(--blue)}
:is(.hero-dark,.product-continuation) .product-hero .hero-points{
  color:#354e6b;background:linear-gradient(110deg,#ffffffdb,#ffffffa6);
  border-color:#d2e0f0;box-shadow:0 8px 24px #426c9910;
}
:is(.hero-dark,.product-continuation) .product-hero .hero-points li+li{border-top-color:#dce6f2}
:is(.hero-dark,.product-continuation) .product-hero .hero-points .ri{color:var(--banner-marker-orange)}
:is(.hero-dark,.product-continuation) .product-hero .btn-secondary{
  color:#315b88;background:#ffffffc9;border-color:#aec7e2;box-shadow:none;
}
.hero-dark .product-hero .hero-media img.hero-original,
.product-continuation .version-scene:not(.version-global-scene) img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);
  mask-image:linear-gradient(90deg,transparent,#000 18%);
}
.hero-dark .product-hero .hero-media::after,
.product-continuation .version-scene:not(.version-global-scene)::after{
  background:linear-gradient(90deg,#f2f7fd 0%,#f2f7fdf5 22%,#f2f7fd99 38%,#f2f7fd26 52%,#f2f7fd00 65%);
}
.hero-dark .product-hero .media-caption{color:#415e7d}
.hero-dark .product-hero .media-caption i{background:#327ac0}
@media(hover:hover) and (pointer:fine){
  :is(.hero-dark,.product-continuation) .product-hero .btn-secondary:hover{
    color:#175fae;background:#e4f0fe;border-color:#81acd9;box-shadow:none;
  }
}
@media(max-width:1279px){
  .hero-dark .product-hero .hero-media img.hero-original,
  .product-continuation .version-scene:not(.version-global-scene) img{
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-dark .product-hero .hero-media::after,
  .product-continuation .version-scene:not(.version-global-scene)::after{
    background:linear-gradient(180deg,#f2f7fd 0%,#f2f7fd00 24%),linear-gradient(0deg,#f2f7fd 0%,#f2f7fd00 16%);
  }
  .hero-dark .product-hero .media-caption{background:var(--banner-surface)}
}

/* The overseas version reuses the homepage globe, without a dark raster backdrop. */
.version-haiwai .version-global-scene::after{display:none}
.version-haiwai .version-global-scene{left:45%;display:flex;align-items:center;justify-content:center;overflow:visible}
.version-haiwai .version-global-scene:not(.is-ready){mix-blend-mode:multiply}
.version-haiwai .version-global-scene iframe,.version-haiwai .version-global-scene .global-scene-poster{
  display:block;position:relative;inset:auto;flex:none;width:110%;max-width:1250px;height:auto;aspect-ratio:16/9;border:0;background:transparent;
}
.version-haiwai .version-global-scene iframe{opacity:0;transition:opacity .5s ease;pointer-events:none;mask-image:linear-gradient(#000 88%,transparent);-webkit-mask-image:linear-gradient(#000 88%,transparent)}
.version-haiwai .version-global-scene .global-scene-poster{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);object-fit:contain;mix-blend-mode:multiply;transition:opacity .5s ease}
.version-haiwai .version-global-scene.is-ready iframe{opacity:1}
.version-haiwai .version-global-scene.is-ready .global-scene-poster{opacity:0}
@media(max-width:1279px){
  .version-haiwai .version-global-scene{position:relative;inset:auto;width:100%;margin:0;overflow:hidden}
  .version-haiwai .version-global-scene iframe{width:100%;max-width:900px}
  .version-haiwai .version-global-scene .global-scene-poster{width:min(100%,900px)}
}
@media(prefers-reduced-motion:reduce){.version-haiwai .version-global-scene :is(iframe,.global-scene-poster){transition:none}}

/* Crop transparent canvas margins in layout; the saved capsule alpha is preserved. */
.version-haiwai .global-language-panel{position:absolute;left:50%;bottom:20px;width:min(480px,78%);aspect-ratio:11.5;transform:translateX(-50%);overflow:hidden;border-radius:999px;filter:drop-shadow(0 5px 14px #4d7aa321)}
.version-haiwai .global-language-panel>img{position:absolute;inset:auto;left:-3%;top:50%;width:106%;max-width:none;height:auto;margin:0;transform:translateY(-50%);object-fit:contain;mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal}
@media(max-width:1279px){
  .version-haiwai .version-global-scene{padding-bottom:64px}
  .version-haiwai .global-language-panel{bottom:16px}
}

/* Equal desktop rhythm: matching banner, heading, questions and action baselines. */
@media(min-width:1280px){
  :is(.hero-dark,.product-continuation) .product-hero{display:flex;align-items:center;min-height:680px;padding:64px 0}
  :is(.hero-dark,.product-continuation) .product-hero :is(.hero-grid>div,.version-copy){width:620px;max-width:620px;padding-bottom:0}
  :is(.hero-dark,.product-continuation) .product-hero h1{display:flex;align-items:center;gap:14px;width:100%;max-width:none;min-height:70px;margin:0;font-size:56px;line-height:1.24}
  :is(.hero-dark,.product-continuation) .product-hero.long-title h1{font-size:44px}
  :is(.hero-dark,.product-continuation) .product-hero .hero-title-icon{width:54px;height:54px;flex:none;margin:0;object-fit:contain}
  :is(.hero-dark,.product-continuation) .product-hero .hero-description{max-width:620px;min-height:35px;margin-top:18px;font-size:20px;line-height:1.75}
  :is(.hero-dark,.product-continuation) .product-hero .hero-questions{width:max-content;max-width:620px;margin-top:28px}
  :is(.hero-dark,.product-continuation) .product-hero .hero-questions-label{font-size:14px;line-height:22px}
  :is(.hero-dark,.product-continuation) .product-hero .hero-points{display:flex;flex-direction:column;width:100%;min-width:0;height:224px;gap:0;margin-top:14px;padding:4px 20px;font-size:17px;font-weight:500;line-height:1.65}
  :is(.hero-dark,.product-continuation) .product-hero .hero-points li{flex:1;align-items:center;gap:12px;padding:12px 0}
  :is(.hero-dark,.product-continuation) .product-hero .hero-points .ri{width:19px;height:19px;flex:none;margin-top:0}
  :is(.hero-dark,.product-continuation) .product-hero .hero-actions{margin-top:30px}
  .hero-dark .product-hero .hero-media img.hero-original,.product-continuation .version-scene:not(.version-global-scene)>img{height:100%;right:0}
  .version-haiwai .version-global-scene iframe{transform:translateX(clamp(32px,3vw,60px))}
  .version-haiwai .version-global-scene .global-scene-poster{transform:translate(calc(-50% + clamp(32px,3vw,60px)),-50%)}
}
@media(min-width:1280px) and (max-width:1599px){
  .hero-dark .product-hero .hero-media img.hero-original,.product-continuation .version-scene:not(.version-global-scene)>img{right:-120px}
}
/* Stack before the copy and scene compete for room on compact desktop screens. */
@media(min-width:1101px) and (max-width:1279px){
  .hero-dark .product-hero{display:block;min-height:0;padding:44px 0 0}
  .hero-dark .hero-grid{display:grid;grid-template-columns:1fr;gap:32px;padding-top:0}
  .hero-dark .hero-grid>div{max-width:700px}
  .hero-dark .hero-media{position:relative;z-index:0;inset:auto;margin:0 calc(var(--gutter)*-1);border-radius:0}
  .hero-dark .hero-media img.hero-original{position:static;width:170%;height:auto;max-width:none;margin-left:-70%;object-fit:contain;transform:none}
  .hero-dark .media-caption{position:relative;inset:auto;padding:0 32px 18px}
  .product-continuation .version-intro{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:44px 0 0}
  .product-continuation .version-copy{max-width:700px;padding-bottom:36px}
  .product-continuation .version-scene{position:relative;inset:auto;order:2;height:auto}
  .product-continuation .version-scene:not(.version-global-scene)>img{position:relative;width:170%;height:auto;max-width:none;right:auto;top:auto;margin-left:-70%;object-fit:contain}
}