/* Shared reading scale for the three implemented pages.
   Loaded last. The existing body #top beats legacy page selectors without
   changing layout, image sizing or the page's viewport-based geometry. */
#top:is(.home-page,.product-page,.solution-page,.news-page){
 --type-font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
 --type-display-font:AlimamaShuHeiTi,var(--type-font);
 --type-hero:clamp(48px,4vw,76px);
 --type-hero-subtitle:32px;
 --type-section:44px;
 --type-card:26px;
 --type-subheading:20px;
 --type-intro:18px;
 --type-body:16px;
 --type-note:14px;
 --type-navigation:16px;
 --type-button:16px;
 --type-weight-regular:400;
 --type-weight-heading:600;
 --type-weight-display:700;
 --type-line-display:1.2;
 --type-line-section:1.35;
 --type-line-heading:1.4;
 --type-line-body:1.7;
 --type-line-control:1.5;
 --type-heading:#1f2937;
 --type-copy:#4b5563;
 --type-muted:#6b7280;
 --type-accent:#2456a6;
 font-family:var(--type-font);
 font-size:var(--type-body);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-body);
 color:var(--type-copy);
}
/* Text colors inherit from the actual background of each section/card. */
#top:is(.home-page,.product-page,.solution-page,.news-page) :is(.hero,.solutions-section,.product-feature,.site-footer){
 --type-heading:#f3f4f6;
 --type-copy:#cbd5e1;
 --type-muted:#a6b3c4;
 --type-accent:#93c5fd;
}
#top.home-page .hero{--type-accent:#09c9e8}
#top.home-page .delivery-main{
 --type-heading:#fff;
 --type-copy:#eef6ff;
 --type-muted:#e2edff;
 --type-accent:#fff;
}
/* Role labels sit on the illustration's pale chips, rather than its blue fill. */
#top.home-page .delivery-main .delivery-role{--type-muted:#2456a6}
#top:is(.home-page,.product-page,.solution-page) main h1{
 font-family:var(--type-display-font);
 font-size:var(--type-hero);
 font-weight:var(--type-weight-display);
 line-height:var(--type-line-display);
 letter-spacing:0;
 color:var(--type-heading);
 overflow-wrap:anywhere;
 text-wrap:balance;
}
#top:is(.home-page,.product-page,.solution-page) main h1 :is(span,strong){white-space:normal}
#top:is(.home-page,.product-page,.solution-page) main h2{
 font-family:var(--type-font);
 font-size:var(--type-section);
 font-weight:var(--type-weight-heading);
 line-height:var(--type-line-section);
 letter-spacing:0;
 color:var(--type-heading);
 overflow-wrap:anywhere;
 text-wrap:balance;
}
#top:is(.home-page,.product-page,.solution-page) main :is(h3,.ai-option-copy>b,.product-value-tabs b){
 font-family:var(--type-font);
 font-size:var(--type-card);
 font-weight:var(--type-weight-heading);
 line-height:var(--type-line-heading);
 letter-spacing:0;
 color:var(--type-heading);
 white-space:normal;
 overflow-wrap:anywhere;
 text-wrap:balance;
}
#top:is(.home-page,.product-page,.solution-page) main :is(h4,.product-scenario-tabs b),
#top:is(.home-page,.product-page,.solution-page) main :is(.solution-panel,.product-feature-grid,.sol-process-list,.sol-scene-copy) h3{
 font-family:var(--type-font);
 font-size:var(--type-subheading);
 font-weight:var(--type-weight-heading);
 line-height:var(--type-line-heading);
 color:var(--type-heading);
 overflow-wrap:anywhere;
 text-wrap:balance;
}
#top:is(.home-page,.product-page,.solution-page) main :is(h1,h2,h3,h4) strong{
 font-weight:inherit;
 color:var(--type-accent);
}
#top:is(.home-page,.product-page,.solution-page) main :is(h1,h2,h3,h4) b{font-weight:inherit}
#top:is(.home-page,.product-page,.solution-page) main :is(.product-hero,.sol-hero) h2{
 font-size:var(--type-hero-subtitle);
 line-height:var(--type-line-heading);
 color:var(--type-accent);
}
#top:is(.home-page,.product-page,.solution-page) main :where(p,li,.ai-option-copy>span,.tab-description){
 font-family:var(--type-font);
 font-size:var(--type-body);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-body);
 color:var(--type-copy);
 overflow-wrap:anywhere;
}
#top:is(.home-page,.product-page,.solution-page) main :is(.section-description,.hero-description,.product-intro,.sol-description){
 font-size:var(--type-intro);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-body);
 color:var(--type-copy);
}
#top:is(.home-page,.product-page,.solution-page) main .product-feature-grid .product-intro{font-size:var(--type-body)}
#top:is(.home-page,.product-page,.solution-page) main .product-cta>.container>p:not(.product-cta-eyebrow){font-size:var(--type-intro)}
#top:is(.home-page,.product-page,.solution-page) main .sol-flow-state p{white-space:normal}
#top:is(.home-page,.product-page,.solution-page) :is(.eyebrow,.hero-note,.ai-caption,.item-number,.solution-number,.case-eyebrow,.customer-logos>p,.cta-eyebrow,.product-code,.product-kicker,.product-case-category,.product-cta-eyebrow,.sol-number,.sol-step-number,.sol-cta-eyebrow,.delivery-role,.mobile-hint,.product-image-missing){
 font-family:var(--type-font);
 font-size:var(--type-note);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-control);
 letter-spacing:0;
 color:var(--type-muted);
}
#top:is(.home-page,.product-page,.solution-page) main :is(.product-features,.product-feature-tags,.sol-tags,.product-tag){
 font-family:var(--type-font);
 font-size:var(--type-note);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-control);
 color:var(--type-muted);
}
#top:is(.home-page,.product-page,.solution-page) main :is(.product-tag,.product-features>span:first-child){color:var(--type-accent)}
#top:is(.home-page,.product-page,.solution-page) main .sol-tags{color:#147d69}
/* Tabs are navigation, while the capability titles inside vertical tabs use
   the card/subheading scale above. Active state changes color, never weight. */
#top:is(.home-page,.product-page,.solution-page) #main-nav>a,
#top:is(.home-page,.product-page,.solution-page) :is(.horizontal-tabs>button,.solution-placeholder,.client-tabs>button,.sol-scene-tabs>button,.product-scenario-tabs>button,.product-value-tabs>button){
 font-family:var(--type-font);
 font-size:var(--type-navigation);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-control);
 color:var(--type-copy);
}
#top:is(.home-page,.product-page,.solution-page) #main-nav>a{white-space:normal;text-wrap:balance}
#top:is(.home-page,.product-page,.solution-page) :is(.horizontal-tabs>button,.client-tabs>button,.sol-scene-tabs>button,.product-scenario-tabs>button,.product-value-tabs>button).active,
#top:is(.home-page,.product-page,.solution-page) :is(.product-scenario-tabs,.product-value-tabs) .active b{color:var(--type-accent)}
#top.home-page .site-header{--type-copy:#cbd5e1;--type-accent:#fff}
#top:is(.home-page,.product-page,.solution-page) #main-nav>a:is(.current,:hover){color:var(--type-accent)}
#top:is(.home-page,.product-page,.solution-page) .button{
 font-family:var(--type-font);
 font-size:var(--type-button);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-control);
 letter-spacing:0;
}
#top:is(.home-page,.product-page,.solution-page) .ai-options button{font-size:var(--type-body);font-weight:var(--type-weight-regular);line-height:var(--type-line-control)}
#top:is(.home-page,.product-page,.solution-page) .button-outline{color:var(--type-accent)}
#top.product-page .site-header .button-ghost{color:var(--type-accent)}
#top:is(.home-page,.product-page,.solution-page) :is(.more-link,.product-case-link){
 font-family:var(--type-font);
 font-size:var(--type-button);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-control);
 color:var(--type-heading);
}
/* The footer and pending-entry dialog use the same scale on all three pages. */
#top:is(.home-page,.product-page,.solution-page,.news-page) .site-footer h4{
 font-family:var(--type-font);
 font-size:var(--type-subheading);
 font-weight:var(--type-weight-heading);
 line-height:var(--type-line-heading);
 color:var(--type-heading);
}
#top:is(.home-page,.product-page,.solution-page,.news-page) .site-footer :is(p,.footer-column>:is(a,span),.footer-bottom,.qr-placeholder){
 font-family:var(--type-font);
 font-size:var(--type-note);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-control);
 color:var(--type-muted);
 white-space:normal;
 overflow-wrap:anywhere;
}
#top:is(.home-page,.product-page,.solution-page,.news-page) .footer-contact>a{
 font-family:var(--type-font);
 font-size:var(--type-body);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-control);
 color:var(--type-copy);
 white-space:normal;
}
#top:is(.home-page,.product-page,.solution-page,.news-page) .footer-contact>a>span{overflow-wrap:anywhere;white-space:normal}
#top:is(.home-page,.product-page,.solution-page,.news-page) dialog h2{
 font-family:var(--type-font);
 font-size:var(--type-card);
 font-weight:var(--type-weight-heading);
 line-height:var(--type-line-heading);
 color:var(--type-heading);
}
#top:is(.home-page,.product-page,.solution-page,.news-page) dialog :is(p,.dialog-contacts){
 font-family:var(--type-font);
 font-size:var(--type-body);
 font-weight:var(--type-weight-regular);
 line-height:var(--type-line-body);
 color:var(--type-copy);
}
/* Legacy home.css marks this helper size/color important. */
#top:is(.home-page,.product-page,.solution-page,.news-page) dialog .dialog-kicker{font-size:var(--type-note)!important;color:var(--type-muted)!important;line-height:var(--type-line-control)}
@media(min-width:641px) and (max-width:1100px){
 #top:is(.home-page,.product-page,.solution-page,.news-page){--type-hero:clamp(40px,4vw,44px);--type-hero-subtitle:28px;--type-section:36px;--type-card:24px;--type-intro:17px}
 /* The existing tablet menu is dark even on the two light hero pages. */
 #top.product-page #main-nav.open{--type-copy:#cbd5e1;--type-accent:#93c5fd}
}
@media(max-width:640px){
 #top:is(.home-page,.product-page,.solution-page,.news-page){--type-hero:clamp(30px,8vw,32px);--type-hero-subtitle:22px;--type-section:28px;--type-card:20px;--type-subheading:18px;--type-intro:16px}
 /* Keep the normalized paragraph clear of the existing card illustration.
    Only its text spacing grows; the card, grid and image rules stay intact. */
 #top.solution-page .sol-challenge-card p{padding-bottom:200px}
 #top.home-page .delivery-main .delivery-role{--type-muted:#102c4d}
}
@media(max-width:360px){#top.solution-page .sol-challenge-card p{padding-bottom:280px}}

/* Detail banners share normal Chinese typography; the approved homepage display face remains scoped above. */
#top:is(.product-page,.solution-page,.solution-v8-page){--type-display-font:var(--type-font);--type-hero:clamp(36px,2.71vw,52px);--type-hero-subtitle:30px}
#top:is(.product-page,.solution-page,.solution-v8-page) main h1{font-family:var(--type-font);font-size:var(--type-hero);font-weight:600;line-height:1.3;text-wrap:wrap;white-space:normal;overflow-wrap:normal;word-break:normal;letter-spacing:0}
#top:is(.product-page,.solution-page,.solution-v8-page) :is(.product-hero,.sol-hero,.editorial-hero) h2{font-family:var(--type-font);font-size:var(--type-hero-subtitle);font-weight:500;line-height:1.45;text-wrap:wrap;overflow-wrap:normal}
#top:is(.product-page,.solution-page,.solution-v8-page) :is(.product-hero,.sol-hero,.editorial-hero) :is(.product-intro,.sol-description,.editorial-hero-copy>p:not(.editorial-eyebrow)){font-size:18px;font-weight:400;line-height:1.7;letter-spacing:0}
#top:is(.product-page,.solution-page,.solution-v8-page) main :is(h2,h3,h4){text-wrap:wrap;overflow-wrap:normal}
@media(max-width:1100px){#top:is(.product-page,.solution-page,.solution-v8-page){--type-hero:38px;--type-hero-subtitle:26px}}
@media(max-width:640px){#top:is(.product-page,.solution-page,.solution-v8-page){--type-hero:30px;--type-hero-subtitle:22px}#top:is(.product-page,.solution-page,.solution-v8-page) :is(.product-hero,.sol-hero,.editorial-hero) :is(.product-intro,.sol-description,.editorial-hero-copy>p:not(.editorial-eyebrow)){font-size:16px}}