/* SIMBATCH-PUBLIC-WEB-V5-ZH-EN-01 — English local styles.
   Loaded by the six /en/ pages only, and every rule is scoped to body.en, so
   nothing here can reach a Chinese page. It exists for one reason: the display
   type on this site is measured in CJK characters. A Chinese headline of 8
   characters and its English translation of 40 do not occupy the same box, and
   several headline rules cap width in ch or pull letter-spacing in by -.04em,
   which is right for Han glyphs and wrong for a Latin word. These are width,
   wrapping and tracking corrections only — no colour, no spacing system, no
   component is redesigned. */

/* Headline measure. The Chinese rules cap at 11ch/15em because that is a full
   line of Han; in English the same cap breaks a heading into a narrow column. */
body.en .hero h1{max-width:100%;letter-spacing:-.03em}

/* SIMBATCH-PUBLIC-WEB-V5-EN-HERO-AND-NATIVE-MEDIA-CORRECTION-02 — hero measure.
   The reported defect was the English H1 painting over the product panel. The
   element box was never wrong: at 1440 the h1 box is 487px and sits inside its
   grid track. What escaped was the TEXT, measured with Range.getClientRects():
   "Build your business." reached x=688 and "Keep what you learn." reached
   x=721, while the product scene starts at x=646.

   The rule that let it out is v5.css's

       @media (min-width:1081px){ .hero h1 span { white-space: nowrap } }

   a declared line break for the Chinese headline. Seven Han glyphs at 66px
   occupy 462px and fit the 487px column, so nowrap is safe there. The English
   line needs 615px at the same size, and nowrap plus overflow:visible paints
   the remainder across the panel. Lowering font-size alone would leave that
   rule armed and the overflow would return at the next wording change, so the
   nowrap is lifted for English and the size is brought into range as well.
   Chinese keeps its declared break: every selector here is under body.en. */
@media (min-width:1081px){
  body.en .hero h1 span{white-space:normal}
  body.en .hero h1{font-size:clamp(44px,3.5vw,52px);font-weight:600;line-height:1.1}
  /* grid children may not be sized by their content */
  body.en .hero__say,body.en .scene{min-width:0}
}
@media (max-width:1080px) and (min-width:621px){
  body.en .hero h1{font-size:clamp(40px,4.4vw,50px);font-weight:600;line-height:1.12}
}
body.en .os-entry-card h3{max-width:22ch;letter-spacing:-.025em}
body.en .sa-heading h2,body.en .final h2,body.en .sv3-footer-invite h2{letter-spacing:-.025em}
body.en .mp-about-hero h1,body.en .mp-product-hero h1,body.en .os-page-hero h1,
body.en .os-contact-hero h1,body.en .sv3-demo-copy h1{letter-spacing:-.03em;max-width:16ch}

/* Long single words (coordination, responsibilities, fulfillment) in narrow
   grid cells. Break only where the browser must, and never mid-word in a
   button. */
body.en .capitem__t,body.en .capitem__d,body.en .fx__ln,body.en .sa-metric dt,
body.en .sv3-kpi span,body.en .mp-work-grid dt,body.en .os-entry-card dt,
body.en .sa-metric small,body.en .sv3-kpi small{overflow-wrap:anywhere}
body.en .btn,body.en .sv3-footer-btn,body.en .lang-switch__opt,
body.en .sv4-player__control,body.en .sa-play{white-space:normal;word-break:keep-all}

/* Three entry cards instead of two: the English home opens with commerce
   operations, China supply chain coordination and B2B, so the row carries one
   more card at desktop width. Below 900px the shared sheet already collapses
   .os-entry-grid to a single column. */
@media(min-width:901px){
 body.en .os-home-services .os-entry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.en .os-home-services .os-entry-card{min-height:344px;padding:30px}
 body.en .os-home-services .os-entry-card h3{margin-top:22px;font-size:clamp(23px,2vw,29px)}
}

/* Navigation row. Four English menu items plus a two-option language control
   plus the CTA is wider than six short Chinese items; give the row a little
   more room before it collapses.
   Every grid override below is inside a min-width query on purpose. The shared
   sheets collapse these grids at 900px and again at 620px, and a body.en rule
   outside a query outranks them on specificity — which is exactly how the
   services list kept its three desktop columns at 375px and pushed the page
   301px wide. Width rules for English belong to the widths they were measured
   at, and nowhere else. */
@media(min-width:861px){
 body.en .nav__inner{gap:24px}
 body.en .nav__links a{padding:9px 12px}
}
@media(min-width:861px) and (max-width:1080px){
 body.en .nav__links a{padding:9px 9px;font-size:14px}
 body.en .nav__inner{gap:14px}
}

/* Tables and definition rows on the services page: the English "what to
   discuss" text is much longer than the Chinese, so the label column no longer
   needs to be as wide as a four-character Chinese label. */
@media(min-width:901px){
 body.en .os-service-list article{grid-template-columns:74px minmax(230px,.6fr) minmax(320px,.8fr)}
 body.en .os-entry-card dl div{grid-template-columns:130px 1fr}
}

/* Player captions carry a longer status sentence in English. */
body.en .sv4-player__caption{line-height:1.6}

/* The video note that names the language of the interface in the picture. */
body.en .en-media-note{margin-top:10px;color:var(--os-muted,#5b6472);font-size:13.5px;line-height:1.65}
body.en .sv5-video-showcase .en-media-note,body.en .sv3-footer-invite .en-media-note{color:#aebbd1}

@media(max-width:620px){
 body.en .hero h1{max-width:none;font-size:clamp(34px,9.4vw,38px);font-weight:600;line-height:1.14}
 body.en .hero__sub{font-size:16.5px;line-height:1.58}
 body.en .os-page-hero h1,body.en .os-contact-hero h1,body.en .mp-about-hero h1,
 body.en .mp-product-hero h1,body.en .sv3-demo-copy h1{max-width:none;font-size:38px}
 body.en .os-contact-copy h2,body.en .os-section-head h2{font-size:32px}
 body.en .os-entry-card h3{font-size:26px;max-width:none}
}