/* Fusion overrides.
   Loaded after both template stylesheets. Everything here exists to make the
   imported Scalora modules sit correctly inside the Mono page; nothing here
   restyles Mono itself. */

/* The imported architecture band ships two <h1> elements. A second and third
   h1 on a page that already has one is an accessibility defect, so the markup
   uses <h2> and the h1 type scale is restored here. Same pixels, correct
   document outline. */
.sc-scope .hero-title-block h2,
.sc-scope .hero-title-inner-block h2 {
  font-size: var(--_typography---heading-h1--h1-font-size);
  line-height: var(--_typography---heading-h1--h1-line-height);
  letter-spacing: var(--_typography---heading-h1--h1-letter-spacing);
  font-weight: var(--_typography---font-weight--font-weight-mediem);
  margin: 0;
}

/* Mono hides the pointer globally (body { cursor: none }) and draws its own
   crosshair. Inside an imported block the crosshair still tracks, but the
   Scalora modules have their own hit targets, so restore a real pointer on
   anything clickable there. */
.sc-scope a,
.sc-scope button,
.sc-scope [role="button"] {
  cursor: pointer;
}

/* Mono sections are full-bleed; the imported ones bring their own container
   padding.

   Note what is NOT here: `overflow-x: clip`. Setting one axis to clip while
   the other stays `visible` makes the visible axis compute to `auto`, so the
   card stack — which is designed to overhang its section — was cropped at the
   section edge and grew a scrollbar. If horizontal bleed ever appears, fix it
   on the offending child, not by clipping the band. */
.sc-scope {
  display: block;
  width: 100%;
}

/* ======================================================================
   Owner review, 2026-09-03: four homepage fixes. All CSS; no markup or
   interaction data changed.
   ====================================================================== */

/* 1. The testimonial cards fly upward and out of their sticky band on
      scroll. In the Mono template the next section (.section.drk) sits at
      z-index 11 and covers them as they leave; the Scalora providers band
      that now follows the testimonials was static, so the departing cards
      stayed visible on top of it. Same stacking as the template's own
      successor. */
.sc-scope.integration {
  position: relative;
  z-index: 11;
}

/* 2. Quote block centred inside every testimonial card. The template card is
      space-between (header at top, quote at bottom); with the short STARGO
      quotations the bottom-anchored block reads as misplaced. Auto margins
      centre it in the space below the header without touching the header. */
.testimonials-card .card-testi {
  margin-top: auto;
  margin-bottom: auto;
}

/* 3. Architecture band (card stack) fills the viewport exactly on desktop.
      The template is content-height — 1188px at 1440×900, taller than most
      laptop screens. Height is pinned to the viewport; the text block keeps
      its template size (378px) and the 3D card stack is zoomed to whatever
      is left. Measured: the rotated stack paints 1.086× its 500px box, so
      zoom = (viewport − 474px) / 543px, stepped every ~60px of height.
      `zoom`, not `transform`, so the interaction runtime's own transforms on
      the stack are untouched. */
@media (min-width: 992px) {
  .sc-scope.sc-hero {
    height: 100vh;
    min-height: 640px;
    box-sizing: border-box;
  }
  .sc-scope.sc-hero .hero-inner { height: 100%; }
  .sc-scope.sc-hero .hero-contant-wrapper {
    height: 100%;
    box-sizing: border-box;
    padding-top: 48px;
    padding-bottom: 0;
    row-gap: 24px;
    justify-content: flex-start;
  }
  .sc-scope.sc-hero .hero-cards-wrapper { flex: 0 0 auto; zoom: 1; }
}
@media (min-width: 992px) and (max-height: 1029px) { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .78; } }
@media (min-width: 992px) and (max-height: 897px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .66; } }
@media (min-width: 992px) and (max-height: 831px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .58; } }
@media (min-width: 992px) and (max-height: 788px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .5; } }
@media (min-width: 992px) and (max-height: 744px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .42; } }
@media (min-width: 992px) and (max-height: 701px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .34; } }
@media (min-width: 992px) and (max-height: 658px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .28; } }

/* 4. Sticky product switcher: the pinned panel fills the viewport while
      pinned. The template pins a 666px panel with 100px of air above and
      below; here the pinned block is one screen tall and the panel grows
      into it. Curated screenshots are ~1600px wide, so the dashboard plate
      may grow past the donor’s 700px cap without upscaling a soft raster. */
@media (min-width: 992px) {
  .sc-scope.products .product-sticky-inner-block {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .sc-scope.products .product-sticky-inner-block > * { width: 100%; }
  .sc-scope.products .products-cards-wrapper { height: calc(100vh - 96px); }
  .sc-scope.products .products-cards-dashboard-block {
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  .sc-scope.products .prodect-dashboard-image-block {
    max-width: min(1040px, 100%);
  }
  .sc-scope.products .products-cards-dashboard-block img {
    max-width: 100%;
    max-height: calc(100vh - 96px - 94px - 72px);
    width: auto;
    height: auto;
  }
}

/* Hero rotating gallery: slightly larger tiles so product screenshots stay
   legible in the orbit without dominating the sticky video grid. */
@media (min-width: 992px) {
  .ro-gallery .ro-home-header-img-wrap { width: 18rem; }
}
@media (min-width: 1440px) {
  .ro-gallery .ro-home-header-img-wrap { width: 20rem; }
}

/* ======================================================================
   Brand wordmark, language switch, and the two foreign page bodies
   (lifelogx pages, Scalora pricing) inside the Mono shell.
   ====================================================================== */
.stargo-wordmark { display: block; width: auto; height: 20px; }
.stargo-wordmark.in-nav { height: 22px; }
.stargo-wordmark.in-footer { height: 26px; }
.stargo-wordmark.in-pill { height: 16px; }
.stargo-wordmark.in-card { height: 18px; }

/* lifelogx body: dark, its own tokens; pointer restored (Mono hides the cursor). */
.lx-scope { display: block; width: 100%; background: #000002; }
.lx-scope a, .lx-scope button, .lx-scope [role="button"] { cursor: pointer; }
.lx-scope .lx-hero-text { word-break: keep-all; }

/* Scalora pricing body: the module stylesheet sets the page ground on .sc-scope;
   give the page block the same ground so the Mono white never shows between
   sections, and keep the pricing tabs usable without the Webflow tabs module. */
.sc-scope.sc-page { display: block; width: 100%; background-color: var(--beckground-color--bg-color-02, #161616); padding-top: 24px; }
.sc-scope.sc-page a, .sc-scope.sc-page [role="button"] { cursor: pointer; }
.sc-scope.sc-page .w-tab-pane { display: none; }
.sc-scope.sc-page .w-tab-pane.w--tab-active { display: block; }
.sc-scope.sc-page .pricing-card-price-block.year { display: none; }

/* Pages whose body is the dark lifelogx template: Mono's nav is drawn in
   black for its white pages, so it is turned white here (the hamburger is a
   white Lottie that Mono inverts; un-invert it). */
body.lx-page { background: #000002; }
body.lx-page .navigation-top .navigation-text-main { color: #fff; }
body.lx-page .navigation-top .line-divider-menu { background-color: #fff; }
body.lx-page .navigation-top .lottie-white { filter: none; }

/* Data tables (loop, capability map, integration): the template's award
   list has three equal columns for one-word cells. These hold sentences, so
   the middle column gets the room and the last is left-aligned. */
#loop .award-wrapper, #loop .grdi-3-columns.mk3,
#atlas .award-wrapper, #atlas .grdi-3-columns.mk3,
#table .award-wrapper, #table .grdi-3-columns.mk3 {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) minmax(0, 1fr);
}
#loop .award-text, #atlas .award-text, #table .award-text { text-align: left; justify-content: flex-start; }

/* Stat numbers in the studio layout: "288" must stay on one line in its .4fr column. */
.stats-grid .h2._01 { font-size: clamp(56px, 5vw, 72px); white-space: nowrap; line-height: 1; }

/* ======================================================================
   Product refactor, 2026-09-05. Narrative, imagery and production fixes;
   no interaction data changed.
   ====================================================================== */

/* 1. The loop hero (imported Scalora band) fills the viewport width on
      every screen instead of sitting in a 1600px rounded card. */
.sc-scope.sc-hero { padding-top: 0; padding-right: 0; padding-left: 0; }
.sc-scope.sc-hero .sc-container { max-width: none; }
.sc-scope.sc-hero .hero-inner { border-radius: 0; }
@media (min-width: 992px) { .sc-scope.sc-hero .hero-contant-wrapper { padding-top: 72px; } }

/* 2. Quote block centred in the image+quote card. The flex item is the
      wrapper <div>, not .card-testi, so the auto margins go on it. */
.testi-grid .card-color { justify-content: flex-start; }
.testi-grid .card-color > div:last-child { margin-top: auto; margin-bottom: auto; }

/* 3. Still images inside the template's background-video boxes (the OS
      theatre, the sticky card, the contact quote card). */
.w-background-video > img.stargo-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The restored film inherits the template grid/zoom; these rules only handle
   its media box and an accessible pause control outside the transformed grid. */
[data-stargo-video] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  /* The supplied film's sculpture is left of centre: retain it in portrait crops. */
  [data-stargo-video] { object-position: 28% center; }
}
.stargo-media-toggle {
  position: absolute; z-index: 30; right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom)); min-height: 44px;
  padding: 10px 18px; border: 1px solid #ffffff70; border-radius: 999px;
  background: #101010e6; color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
.stargo-media-toggle:disabled { opacity: .65; }

/* Keep the existing switcher's palette and crossfade, with exclusive panels. */
.stargo-switcher .products-card-name-wrapper [role="tab"] { cursor: pointer; }
.stargo-switcher .products-card-name-wrapper [role="tab"] .products-card-name-inner-block {
  color: #b2b0ae; background-color: #1b191a !important;
  transition: color .35s ease, background-color .35s ease;
}
.stargo-switcher .products-card-name-wrapper [aria-selected="true"] .products-card-name-inner-block {
  color: #fff; background-color: #282522 !important;
}
.stargo-switcher .products-cards-right-inner-block > [role="tabpanel"] {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.stargo-switcher .products-cards-right-inner-block > [role="tabpanel"].is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .35s ease, visibility 0s;
}
@media (min-width: 992px) {
  .sc-scope.products .product-sticky-inner-block > .section-contant-padding { padding-block: 48px; }
  .stargo-switcher .products-cards-right-inner-block { height: 100%; }
  /* Scalora draws a decorative frame over this section — two 1px rules and four
     corner dots — at the section's own padding: the verticals at the 40px side
     padding, the horizontals at the 100px block padding it shipped with. The
     line above reduces that block padding to 48px so the four panels fit the
     sticky viewport, which left the top rule 52px inside the first tab, drawn
     straight through 「Growth OS · 主动获客」 / "Growth OS · Prospecting" (the
     frame paints above the cards: z-index 2, pointer-events none). The frame
     follows the padding it belongs to. The dots stay centred on their corners,
     4px up from the rule, as the donor draws them at every other width. */
  .sc-scope.products .section-border-02 { top: 48px; }
  .sc-scope.products .section-border-04 { bottom: 48px; }
  .sc-scope.products .section-border-bot-01, .sc-scope.products .section-border-bot-02 { top: 44px; }
  .sc-scope.products .section-border-bot-03, .sc-scope.products .section-border-bot-04 { bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .stargo-switcher [role="tabpanel"], .stargo-switcher .products-card-name-inner-block { transition: none !important; }
}

/* 4. Template stock photography that is set in CSS → STARGO imagery (enterprise
      page hero backgrounds and the homepage vision band). The homepage contact
      band keeps the template's group photograph behind its glass form. */
.image-about, .image-about._01 { background-image: url("../assets/stargo-editorial/os-cockpit.webp"); }
.image-about._02 { background-image: url("../assets/stargo-editorial/os-agent-center.webp"); }
.image-about._03 { background-image: url("../assets/stargo-editorial/os-login.webp"); }
.image-about._04 { background-image: url("../assets/stargo-editorial/os-trade-execution.webp"); }
.absolute-photo { background-image: url("../assets/stargo-editorial/os-cockpit.webp"); }
.team-small-card { background-image: url("../assets/stargo-editorial/avatar-01.png.webp"); }
.team-small-card._02 { background-image: url("../assets/stargo-editorial/avatar-04.png.webp"); }
.team-small-card._03 { background-image: url("../assets/stargo-editorial/avatar-06.png.webp"); }
.team-small-card._04 { background-image: url("../assets/stargo-editorial/avatar-09.png.webp"); }

/* 5. lifelogx pages (Intelligence, AI Workforce, About, Blog, articles) keep the
      template's own palette, gradients and imagery (owner decision, 2026-09-06).
      The template's navigation is in normal flow and 80px tall (72px on
      phones); Mono's floats over the page, so the page bodies start that far
      down to reproduce the template's composition exactly. */
body.lx-page .lx-scope { padding-top: 80px; }
@media (max-width: 767px) { body.lx-page .lx-scope { padding-top: 72px; } }

/* 6. The core-system switcher's four names are buttons as well as scroll stops. */
.sc-scope.products .products-card-name-block { cursor: pointer; }
.sc-scope.products .products-card-name-block:focus-visible { outline: 2px solid #e8823a; outline-offset: -2px; border-radius: 8px; }

/* 7. Forms: honeypot off-screen; the status line under a form. */
.stargo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stargo-form-note { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.stargo-form-note a { text-decoration: underline; color: inherit; }
form[data-stargo-busy] input[type="submit"] { opacity: .6; pointer-events: none; }

/* 8. Legal pages: readable rich text on the post layout. */
.w-richtext h4 { margin: 32px 0 10px; font-size: 20px; }
.w-richtext p, .w-richtext li { line-height: 1.7; }
.w-richtext ul { padding-left: 20px; }

/* 9. The scenario cards keep the template's portraits (CSS backgrounds). The
      pricing-ladder flip cards quote a plan, not a person: no portrait there. */
.card-author.third .author-circle { display: none; }

/* 10. lifelogx hero: the giant word is absolutely positioned against the page
       container in the template, and stays so — the offset above puts that
       container exactly where the template's in-flow nav left it. */

/* 11. Floating pill: English labels are longer than the template's; give the
       pill room instead of clipping "Capabilities" / "AI Workforce". */
html[lang="en"] .menu-bottom { max-width: 720px; }
.menu-bottom .navigation-text-main { white-space: nowrap; }

/* 12. Keyboard users get a visible focus ring (the template hides the cursor
       and relies on hover states only). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #e8823a; outline-offset: 3px; }

/* 13. Mobile navigation: 44px tap targets and no page scroll while the
       Webflow nav overlay is open. */
@media (max-width: 991px) {
  .w-nav-overlay .nav-menu .button-link { min-height: 44px; padding-top: 8px; padding-bottom: 8px; align-items: center; }
  body:has(.w-nav-button.w--open) { overflow: hidden; }
  /* With the page locked, a menu taller than a landscape phone (844x390:
     links to y=478) could never show its last links; it scrolls itself. */
  .w-nav-overlay .w-nav-menu[data-nav-menu-open] { max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain; }
}
/* The desktop side menu is 944-965px of content in a 100vh panel: on a laptop
   screen its last links, icons and demo card fell below the fold. It scrolls
   itself (tools/chrome.mjs marks it data-lenis-prevent), without a bar. */
#stargo-side-menu .navigation-content { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
#stargo-side-menu .navigation-content::-webkit-scrollbar { display: none; }
/* With the menu scrolling inside itself the open page no longer overflows, so
   the document's scroll height drops to 0. Webflow's body ResizeObserver then
   refreshes every ScrollTrigger, and ScrollTrigger re-refreshes each earlier
   trigger whose end is 0: trigger k costs 2^k calls, which froze the homepage
   for minutes (and already froze it on 1920x1080 screens before). One pixel of
   document scroll while the menu is open keeps every end above 0. */
body:has(#stargo-side-menu:not([inert])) { min-height: calc(100vh + 1px); }
/* The demo form is pinned to the bottom of a 90vh section the band above
   overlaps by 100px; under ~640px of height its heading and first fields were
   cut off. Short screens get a section tall enough for the card. */
@media (max-height: 640px) { .section.ctc { min-height: 640px; } }

/* Audit fixes: retain each template's motion, make content legible at rest. */
body.stargo-dark-page { background: #1b1a19; }
/* The nav is drawn in the page's own black, which disappears against a dark
   hero. A whole-page dark treatment is the wrong tool where only the top of
   the page is dark -- the capability page opens on renok's black hero and
   turns light below the curve -- so the nav half of it stands on its own. The
   nav scrolls away with the hero, so it never meets the light section. */
body.stargo-dark-page .navigation-top .navigation-text-main,
body.stargo-dark-nav .navigation-top .navigation-text-main { color: #fff; }
body.stargo-dark-page .navigation-top .line-divider-menu,
body.stargo-dark-nav .navigation-top .line-divider-menu { background-color: #fff; }
@media (max-width: 991px) {
  body .navigation-top .menu-button,
  body .navigation-top .menu-button.w--open { background: #f4f4f4; min-width: 44px; min-height: 44px; }
  body .navigation-top .menu-button .lottie-white { filter: invert(1); }
  /* Webflow moves the links into its light overlay on mobile. */
  body .navigation-top .w-nav-overlay .navigation-text-main { color: #111; }
}
/* The template sets "Lifelogx" at 16rem (20rem from 1440px). Its Latin glyphs
   end at the baseline, so the animated phone rising into the word only meets the
   descender of the g. CJK glyphs fill the whole em box: at 0.9× the Latin size
   their visible bottom lands where the Latin baseline was, and the three- or
   four-character words stay narrower than the container at every width. From
   1440px the template's phone rests 318px from the top whatever the width, so
   the CJK word is capped at 226px: the ink height of "Lifelogx" at 20rem. English
   words here are longer than "Lifelogx" and are sized by viewport instead. */
.lx-scope .lx-hero-text { font-size: clamp(56px, 18vw, 226px); letter-spacing: -.045em; white-space: nowrap; }
html[lang="en"] .lx-scope .lx-hero-text { font-size: clamp(40px, 14.2vw, 210px); letter-spacing: -.03em; }
#lx-ontology, #lx-teams, #lx-more, #lx-evolution { scroll-margin-top: 100px; }
.stargo-contact-page .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.stargo-contact-page .grid-form > div { min-width: 0; }
.stargo-contact-page .text-field-2 { width: 100%; min-height: 48px; }
.stargo-contact-page textarea.text-field-2 { min-height: 140px; resize: vertical; }
@media (max-width: 991px) {
  .stargo-contact-page .grid-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .stargo-contact-page .text-field-2 { font-size: 16px; }
  .stargo-contact-page .form-amin { padding-inline: 16px; }
}
/* Contact band: the template's glass card over its photograph. 16px inputs stop
   iOS zooming the form; nothing else about the card changes. */
.section.ctc .contact-card .text-field { font-size: 16px; }
.section.ctc .contact-card .text-field::placeholder { font-size: 16px; }
.stargo-form-consent { margin: 16px 0; font-size: 13px; line-height: 1.6; }
.stargo-form-consent a { color: inherit; text-decoration: underline; }
.sc-scope .pricing-tab-link.w--current { color: #17110c; }
.top-text.big.gray.sm { color: #999; opacity: 1; }
button.toggle-header { width: 100%; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* Cloned template grid nodes need unique IDs, but keep the donor placement. */
[data-stargo-grid="w-node-f4f6d413-6968-d40f-07ed-7736cdf55b9b-cdf55b9b"],
[data-stargo-grid="w-node-f4f6d413-6968-d40f-07ed-7736cdf55b9c-cdf55b9b"] { grid-area: 1 / 1 / 2 / 5; }
[data-stargo-grid="w-node-f4f6d413-6968-d40f-07ed-7736cdf55b9f-cdf55b9b"] { grid-area: 1 / 4 / 2 / 5; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c9-993a4d49"],
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924cb-993a4d49"] { justify-self: start; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924cd-993a4d49"] { justify-self: end; }
[data-stargo-grid="w-node-_8a43d27d-b7fc-1aa9-5720-a9b126877931-993a4d49"] { grid-area: 1 / 2 / 2 / 4; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c2-993a4d49"] { justify-self: center; }
[data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c4-993a4d49"] { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
@media (max-width: 991px) { [data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c2-993a4d49"] { justify-self: end; } }
@media (max-width: 479px) {
  [data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c0-993a4d49"] { justify-self: start; }
  [data-stargo-grid="w-node-_8fd1d186-4590-97f8-ca96-eaab35b924c2-993a4d49"] { justify-self: center; }
}
@media (max-width: 767px) {
  /* The donor had four categories; STARGO has two. Don't retain empty tracks. */
  .sc-scope .pricing-tabs-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-scope .pricing-tab-link { display: flex; align-items: center; justify-content: center; min-height: 52px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* Match the three columns of the animated phone below. The donor's 1:2.5:1
     intro grid squeezed copy; a full-width row would intersect the phone's
     retained upward entrance. Equal columns preserve its clear centre lane. */
  .lx-scope .lx-hero-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-scope .lx-hero-home-mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The retained entrance scales the holder to 1.5. Size its content for that
     largest state; do not override the animation's transform or timing. */
  .lx-scope .lx-home-hero-mobile-wrapper .lx-integrations_06-app { width: calc(100% / 1.5); }
  .lx-scope .lx-hero-desc { width: 100%; font-size: 24px; }
}

/* ======================================================================
   Template restore, 2026-09-06: original imagery and composition back,
   STARGO copy adapted to the containers. No interaction data changed.
   ====================================================================== */

/* Pricing-ladder title: the orb sits inline before the first character (build
   moves it inside the heading), so it travels with the centred first line in
   both languages instead of being pinned 50px from the block's left edge. */
.h2.for-stats { text-indent: 0; }
.h2.for-stats .video-logo.for-sct.stargo-inline-orb { position: static; display: inline-flex; vertical-align: -0.14em; margin: 0 .18em 0 0; inset: auto; }

/* The template's client marks on the scenario and ladder cards → the STARGO wordmark. */
.logo-testi-1.stargo-card-mark { width: auto; height: 16px; }
.card-stats-side .logo-testi-1.stargo-card-mark { height: 12px; }

/* Blog and article pages (lifelogx design) */
.lx-scope .lx-post-meta { margin: 1rem 0 0; color: var(--_primitives---primary--text-grey, #989898); font-size: .95rem; }
.lx-scope .lx-post-meta a { color: inherit; text-decoration: underline; }
.lx-scope .lx-post-date { display: block; margin-top: .4rem; font-size: .85rem; color: var(--_primitives---primary--text-dark-grey, #717171); }
.lx-scope a.lx-related-item { color: inherit; text-decoration: none; transition: opacity .3s; }
.lx-scope a.lx-related-item:hover { opacity: .75; }
.lx-scope .lx-text-rich-text h3 { margin-top: 2.5rem; }
.lx-scope .lx-text-rich-text a { color: var(--_semantics---primary, #e393bd); }
.lx-scope .lx-blog-details-image-holder .lx-blog-image.lx-details { width: 100%; }
/* The holder is a shrink-to-fit flex item: 0px wide until the hero decodes,
   then it pushed the article down (CLS 0.15-0.36). Give it its final width up
   front; 1180px is the width the hero's sizes attribute already names. */
.lx-scope .lx-blog-details-image-holder { width: 100%; max-width: 1180px; }
@media (max-width: 991px) {
  .lx-scope .lx-blog-details-grid { grid-template-columns: 1fr; }
  .lx-scope .lx-blog-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .lx-scope .lx-blog-list { grid-template-columns: 1fr; }
}
/* About: the four hero circles are AI-employee roles, not people. */
.lx-scope .lx-about-name { white-space: nowrap; }

/* Mono's element-level typography (p/li at .7 opacity, -.5px tracking, 500
   weight, its own sizes; h4 tracking; blockquote colour) reaches into the
   lifelogx scope because both stylesheets share the page. The lifelogx layer
   scopes its own element rules with :where(), so this reset carries the same
   specificity, loads last, and still loses to every lifelogx class rule. */
:where(.lx-scope) :is(p, li) { opacity: 1; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: normal; }
:where(.lx-scope) :is(h1, h2, h3, h4, h5, h6) { letter-spacing: normal; }
:where(.lx-scope) blockquote { color: inherit; font-weight: inherit; }

/* Navigation labels. Mono's .button-link is a wrapping flex row (moon icon + label,
   slid 16px left so the icon hides until hover) and its labels were short.
   STARGO's English labels are longer, so at 992-1279px the label wrapped under
   the icon and the slide clipped its first letters; in the closed overlay menu
   the wider English items reached past the viewport and the page could be
   scrolled sideways at 1024-1100px. Keep icon and label on one line, give the
   English row a slightly smaller size where the template's 49% column cannot
   hold it, and size the overlay labels to the viewport in that range. */
.button-link { flex-wrap: nowrap; }                 /* top nav, pill and footer grid: icon and label on one line */
.navigation-text-main { white-space: nowrap; }
@media (min-width: 992px) {
  .navigation-top .nav-menu.first .button-link { flex-shrink: 0; }
}
@media (min-width: 992px) and (max-width: 1439px) {
  html[lang="en"] .navigation-top .nav-menu.first { grid-column-gap: 10px; }
  html[lang="en"] .navigation-top .navigation-text-main { font-size: 15px; }
  /* Overlay menu (desktop drawer): the template's 48px labels in a ~22vw column.
     "AI Workforce" and the legal row are wider than "Home"/"Work (4)" were. */
  html[lang="en"] .menu-wrapper .menu-item .button-with-line { font-size: min(var(--font--h2), 3.1vw); }
  html[lang="en"] .menu-wrapper .menu-item .button-text { white-space: nowrap; }
  html[lang="en"] .menu-wrapper .flex-bottom { flex-wrap: wrap; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  html[lang="en"] .navigation-top .nav-menu.first { grid-column-gap: 8px; }
  html[lang="en"] .navigation-top .navigation-text-main { font-size: 14px; }
}

/* "No writing" words: CJK text may break between any two characters, so the
   template's 1fr / 2.5fr / 1fr grid gave "等提示" a column narrower than the word
   and wrapped it into two lines. Keep each word on one line, as the template's
   Latin words are, and let the column size itself to the word. */
.lx-scope .lx-big-gradient-text { white-space: nowrap; }

/* Feature cards. The template's fixed-height cards (24rem / 21.5rem) sit in
   three 224px columns at tablet width, where four lines of 2rem no longer fit
   (the template's own English copy is clipped there as well): 1.5rem holds the
   four lines. Between 992 and 1279px the English titles need 1.8rem to stay on
   one line beside their icon; at 2rem "Works anywhere" wrapped and pushed the
   copy out through the top of the card. */
@media (min-width: 768px) and (max-width: 991px) {
  .lx-scope .lx-expandable-text { font-size: 1.5rem; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  html[lang="en"] .lx-scope .lx-expandable-icon-text .lx-expandable-text { font-size: 1.6rem; }
}

/* Footer grids. The template's "Pages" grid has four equal columns for five
   one-word links; STARGO's has three columns of longer labels, so it gets three.
   The contact grid keeps the template's own two-column spans (e-mail + WhatsApp,
   website), but a footer link hides its icon by sliding 16px left inside an
   overflow-hidden box, so a label must be 17px narrower than its column: below
   1280px the footer links are set at 15px and the WhatsApp label drops its
   prefix. */
.footer .footer-small-grid:not(.sec):has(> .flex-item > a.button-link) { grid-template-columns: repeat(3, 1fr); }
/* .navigation-text-main is a flex container, so the prefix span is a flex item
   and the space after "WhatsApp" is trimmed: put that gap back as a margin. */
.footer .stargo-wa { margin-right: .3em; }
@media (max-width: 1279px) {
  .footer .navigation-text-main { font-size: 15px; }
}
/* The band where the prefix genuinely does not fit is 768-1279px, not
   "everything below 1280". Measured on the built page with the prefix forced
   visible: the label "WhatsApp +86 187 7512 7878" needs 198px at the footer's
   15px, and the contact grid's first span gives 194px at 768, 211px at 834 and
   181px at 1024 — minus the 16px icon slide, 178/195/165px of visible box. So
   the last digits of the number were cut, which is why this rule exists.
   Below 768 the footer's bottom is a single column (see the mobile footer block
   at the end of this file) and the same link is 307px wide at 320 and 413px at
   430, so the prefix fits with 109-215px to spare and comes back — a phone must
   not be told to ring a bare number with no channel on it. */
@media (min-width: 768px) and (max-width: 1279px) {
  .footer .stargo-wa { display: none; }
}
@media (max-width: 479px) {
  .footer .footer-small-grid:not(.sec):has(> .flex-item > a.button-link) { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Intrinsic image dimensions.

   Generated imagery carries width/height attributes so the browser can reserve
   the right box before the file arrives (no layout shift). The templates only
   ever set `max-width: 100%`, so a constrained image kept the attribute's
   *pixel* height while its width shrank to the column: a 1586x992 screenshot
   rendered 295px wide and 992px tall, i.e. squeezed to a ribbon. This was
   visible on the enterprise team grid and the homepage OS scenes.

   `height: auto` restores the attribute's aspect ratio. It sits at zero
   specificity, so every template class that sets a genuine height
   (.work-image-cover, .team-image children, the sticky card art) still wins. */
:where(img[width][height]) { height: auto; }

/* The wordmark is a fixed-height logo dropped into containers the template
   sized for its own square mark. Let it letterbox instead of squashing. */
.stargo-wordmark,
.logo-testi-1.stargo-card-mark { width: auto; object-fit: contain; }

/* ---------------------------------------------------------------------------
   Top navigation: nine items.

   Mono lays the bar out as four equal grid columns — logo, then the menu across
   columns 2-3, then the burger — so the menu had a fixed 629px at 1280 and 685px
   at 1920 no matter how many items it held. Six product pages plus About, Blog and
   the language switch need 740px in English, so the last items ran out of their
   column and into the burger.

   Give the middle column exactly the width the menu needs and split what is left
   evenly between the two sides: the group stays centred, the burger keeps its
   corner, and the row can no longer overflow. Below 992px the menu is the
   template's own dropdown and this does not apply. */
@media (min-width: 992px) {
  .navigation-top .navbar { grid-template-columns: 1fr auto 1fr; }
  .navigation-top .navbar > .make-grid { grid-column: 2 / 3; width: max-content; }
  .navigation-top .navbar > .last-part { grid-column: 3 / 4; }
  /* The menu is width:100% inside its column, which contributes nothing to an
     auto track: size it to its content so the track can ask for what it needs. */
  .navigation-top .navbar > .make-grid > .nav-menu.first { width: max-content; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Pricing page in the Lifelogx palette.

   The plan ladder is Scalora's, and Scalora's accent is a copper orange that
   reaches almost everything through one token. Rebind that token to Lifelogx's
   magenta on this page and restate the three rules that hard-code the orange,
   and the badge, the active tab, the plan icons, the promoted card and its top
   border all read pink-purple. Nothing else about the layout moves. */
body.stargo-pricing-lx,
body.stargo-pricing-lx .sc-scope { --border-color--border-color-03: #f938a1; }

body.stargo-pricing-lx .top-border { background-image: linear-gradient(#f938a1, #f938a100); }

body.stargo-pricing-lx .sc-pricing-card.growth {
  background-image:
    linear-gradient(117deg, #f938a12e .96%, #500b3800 95.98%),
    url("../assets/69a01660589c516ba5f0f917/69a2a0d626d85bfe3d20a9ed_number-card-big-img.svg");
  box-shadow: 0 0 0 1px #f938a133, 0 24px 70px -30px #f938a159;
}

body.stargo-pricing-lx .button-primary {
  box-shadow: 0 0 0 3px var(--beckground-color--white), 0 2px 5px 0 #0003,
    0 0 0 2px #f8eaf0, 0 3.714px 4.846px 0 #f938a11c, 0 10.2px 13.3px 0 #f938a114;
}

/* Scalora's eyebrow icon is an orange SVG, so it cannot follow the token: turn
   its hue to the same magenta rather than ship a second copy of the asset. */
body.stargo-pricing-lx .caption-icon { filter: hue-rotate(300deg) saturate(1.3); }

/* The plan STARGO promotes says so, in the template's own eyebrow type. It takes
   its own line above the plan name so a two-word name is not squeezed. */
body.stargo-pricing-lx .growth-card .pricing-card-top-block { flex-wrap: wrap; }
body.stargo-pricing-lx .stargo-plan-badge {
  order: -1;
  align-self: flex-start;
  /* margin-right:100% pushes the plan name onto the next row while the badge
     itself stays the width of its words. */
  margin: 0 100% 12px 0;
  border: 1px solid #f938a159;
  border-radius: 999px;
  padding: 4px 10px;
  color: #ffe3f2;
  background: #f938a11f;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
}

/* ======================================================= capability map
   Wrapper for the transplanted cinery FAQ block. The block's own look —
   gradient split heading, blur sweep, rounded rows, plus rotation, expand
   animation — comes from css/cinery.cn.css and js/app.fused.js untouched.
   These rules only give it a place to sit on our page and space the bands
   between its three groups of rows. */
.cn-capmap { background: #000; padding: 140px 5vw; }
.cn-capmap-inner { max-width: 1180px; margin: 0 auto; }
.cn-capmap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.cn-capmap-lede { max-width: 720px; margin: 40px 0 0; font-size: 20px; line-height: 30px; color: #b9b9b9; }
.cn-capmap-scope { max-width: 720px; margin: 16px 0 0; font-size: 15px; line-height: 24px; color: #6f6f6f; }
.cn-capmap .cn-band { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  margin: 76px 0 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14); }
.cn-capmap .cn-band-label { font-size: 22px; line-height: 28px; color: #fff; letter-spacing: -.3px; }
.cn-capmap .cn-band-note { font-size: 15px; line-height: 24px; color: #7d7d7d; }
.cn-capmap .cn-faq-container { display: flex; flex-flow: column; gap: 14px; }
/* the donor answers one question with one paragraph; a capability group
   answers with many, so give consecutive paragraphs a rhythm */
.cn-capmap .cn-accordion-answer-text + .cn-accordion-answer-text { margin-top: 12px; }
.cn-capmap .cn-accordion-answer-text strong { color: #fff; font-weight: 500; }
.cn-capmap .cn-accordion-answer-text.cn-lede { color: #cfcfcf; margin-bottom: 20px; }
.cn-capmap .cn-accordion-answer-text.cn-out { margin-top: 20px; }
.cn-capmap .cn-accordion-answer-text.cn-note { color: #6f6f6f; font-size: 15px; margin-top: 16px; }
@media (max-width: 767px) {
  .cn-capmap { padding: 80px 22px; }
  .cn-capmap-head { flex-flow: column; gap: 12px; }
  .cn-capmap-lede { font-size: 17px; line-height: 26px; }
  .cn-capmap .cn-band { margin: 52px 0 20px; }
}

/* ======================================================= pricing palette
   Scalora writes a few of its accent colours as literal hex rather than
   through the token this site rebinds, so they survived the recolour at 12%
   alpha: the caption chip's fill and hairline, its divider, and the CTA icon
   block's border and wash. Rebind them to the Lifelogx magenta the rest of the
   page now uses. No orange remains on the page. */
.hero-section-caption-block { background-color: rgba(249, 56, 161, .12) !important;
  border-color: rgba(249, 56, 161, .22) !important; }
.hero-caption-devider { background-color: rgba(249, 56, 161, .35) !important; }
.cta-icon-block { border-color: rgba(249, 56, 161, .22) !important;
  background-image: linear-gradient(90deg, rgba(249, 56, 161, .12), rgba(249, 56, 161, .40) 54.55%, rgba(249, 56, 161, .08)) !important; }

/* The pricing headline gets the Intelligence page's treatment: white type
   fading downward, so the two big statements on the site read as one family.
   Intelligence clips a gradient to its glyphs, but this headline is split into
   per-character spans by SplitText, and a clipped background lives on the h1
   while the glyphs live in the spans — the text disappears. A mask fades the
   rendered result instead, which the split spans pass through untouched. */
.pricing-hero-title-block h1 {
  color: #fffffe;
  -webkit-mask-image: linear-gradient(180deg, #000 22%, rgba(0, 0, 0, .28));
  mask-image: linear-gradient(180deg, #000 22%, rgba(0, 0, 0, .28));
}
.pricing-hero-title-block h1 .sub-title-text { color: #f938a1; }

/* Scalora accents one word of the headline in Instrument Serif Italic. That
   reads well in Latin, but the accent here contains Chinese, and a Latin italic
   serif has no CJK glyphs — the browser synthesises a slanted fallback and the
   two halves of the phrase stop matching. Let the accent take the headline's
   own face; the magenta gradient above already marks it out. */
.pricing-hero-title-block h1 .sub-title-text { font-family: inherit; font-style: normal; }

/* The donor scales this headline 192 / 160 / 128 / 96 / 56px across its own
   breakpoints, but only the first two sizes sit in a media block the extractor
   in tools/cinery-prepare.mjs can read; the rest are nested deeper. These are
   the donor's own values, recovered by measuring its page at each width, so the
   transplant scales exactly as the original does. */
@media (max-width: 1279px) { .cn-capmap .cn-heading-style-h2 { font-size: 160px; } }
@media (max-width: 991px)  { .cn-capmap .cn-heading-style-h2 { font-size: 128px; } }
@media (max-width: 767px)  { .cn-capmap .cn-heading-style-h2 { font-size: 96px; } }
@media (max-width: 479px)  { .cn-capmap .cn-heading-style-h2 { font-size: 56px; } }

/* The capability map's ten narrative blocks are lumenis service cards; the
   fourteen-group catalogue below them is cinery's accordion. Both donors keep
   their own look. These rules only stack the cards and dress the three band
   headings and the module's own opening, which no donor supplies. */
.lm-capmap-cards { display: flex; flex-flow: column; gap: 28px; }
.cn-capmap-eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #8d8d8d; }
.cn-capmap-count { font-size: 44px; line-height: 1; color: #4b4b4b; }
.cn-capmap-title { margin: 26px 0 0; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.08;
  letter-spacing: -.02em; color: #fdfcfc; max-width: 16ch; }
.lm-capmap .lm-capmap-groups { margin-top: 14px; font-size: 14px; line-height: 22px; color: #8d8d8d; }
@media (max-width: 767px) { .lm-capmap-cards { gap: 18px; } .cn-capmap-count { font-size: 32px; } }

/* On the Chinese capability page each capability leads with its Chinese name and
   keeps the product name beneath it as a small subtitle, so a Chinese reader
   never has to parse English to follow the list. */
/* A capability's product name, carried as a small subtitle under its Chinese
   name on the Chinese page. The donor blocks of the capability page all use the
   plain `.cap-en`; `.lm-cap-en` is the older lumenis-only spelling. */
.cap-en { display: block; margin-top: 3px;
  font-size: .72em; letter-spacing: .06em; font-weight: 400; opacity: .62; text-transform: none; }

.lm-capmap .lm-cap-en, .cn-capmap .lm-cap-en { display: block; margin-top: 3px;
  font-size: 12px; letter-spacing: .06em; font-weight: 400; color: #8d8d8d; text-transform: none; }
.cn-capmap .cn-accordion-answer-text .lm-cap-en { display: inline; margin: 0 0 0 8px; }

/* The pill's middle cell used to hold one wordmark, so it has no layout of its
   own; four capability jumps dropped into it overlapped. Lay them out as a row
   and let the cell size itself to them. */
.menu-bottom .menu-first-bottom.caps { display: flex; align-items: center; gap: 20px;
  justify-content: center; white-space: nowrap; }
/* Keep the template's own link structure: the label sits 16px left of centre to
   cover the icon it hides, so the icon has to stay in the box or the first
   character is clipped out of it. */
.menu-bottom .menu-first-bottom.caps .button-link { flex: 0 0 auto; }

/* The pill's middle column was sized for one wordmark (84px). Four capability
   jumps need their own width, so let that column take its content and the pill
   grow with it, still centred. */
.menu-bottom:has(.menu-first-bottom.caps) {
  grid-template-columns: max-content max-content max-content;
  width: max-content; max-width: calc(100vw - 40px);
}

/* Homepage comparison headline (#compare) — reserve the headline's own height.
   The Mono template stacks three <h2 class="pricing-txt"> inside
   .pricing-txt-wrapper with `position: absolute`, so the wrapper carries no
   content height at all: it is only its own padding (60+60px desktop,
   35+35px <=991px). The template's own strings are always one line, so the
   headline fitted inside that padding. The English copy
   "The difference is the loop." wraps to two lines at --button--cta-title
   (96px inside the 800px .max-w-center column), measures 211px tall, and so
   spilled 45.6px out of the 120px wrapper in both directions — painting over
   the "(Two ways to run trade)" eyebrow above it and the
   "Every step of growth…" paragraph below it (measured overlap 35.6px on both
   sides at 1440/1920/2560).

   Fix: stack the three headings in a single CSS grid cell instead of taking
   them out of flow. They still overlap each other exactly as before, so the
   Webflow cross-fade (opacity + yPercent per split character) is untouched,
   but the grid row now auto-sizes to the tallest of the three at every width
   and in both languages, and nothing can reach the paragraphs again. The
   template's padding is folded into `min-height` (120px / 70px = exactly the
   padding it replaces) so every case that already fitted — the whole Chinese
   page, English at 768/991 — keeps the template's spacing to the pixel; only
   the two-line English case grows. Font, weight, letter-spacing, colour and
   centring are all left to the template. Scoped to #compare so the identical
   block on capabilities.html (#start) is not touched. */

#compare .pricing-txt-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  align-content: center;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 120px;
}

#compare .pricing-txt-wrapper > .pricing-txt {
  grid-area: 1 / 1;
  position: static;
  max-width: 100%;
}

@media screen and (max-width: 991px) {
  #compare .pricing-txt-wrapper {
    min-height: 70px;
  }
}

/* ============================= "No / prompting / waiting / forgetting" band
   (intelligence.html and en/intelligence.html, .lx-section.lx-no-writing)

   Lifelogx lays this band out as one grid, `1fr 2.5fr 1fr`: a word on the left,
   the cut-out photograph of the handset in the middle, the three cross-fading
   words on the right — and it pulls the right-hand column 4rem back towards the
   middle (`.lx-gradient-grid-item.lx-hide-landscape { left: -4rem }`), so that
   column starts 64px inside the photograph's own track. The outer tracks are
   min-content sized, so a track is exactly as wide as its longest word and has
   no slack to absorb that pull: the first 64px of the word sits under the image,
   which carries `z-index: 1`, and is painted over. The template's own words
   ("Writing / Waiting / Saving") were narrow enough that the pull landed in the
   transparent margin of the cut-out; ours are not, and past a certain viewport
   height `object-fit: cover` crops the photograph straight through the handset,
   so those 64px become solid pixels — at 2560x1440 the "p" of "prompting" and
   the left half of "丢" vanish behind a hard image edge.

   Two changes, both size and position only. The gradient clipped to the glyphs,
   the photograph, and the IX2 fade/translate that brings each word in on scroll
   are all untouched (measured: every word still runs opacity 0 -> 1 and the
   image still steps through its scroll transform at every width). */

@media (min-width: 992px) {
  /* Let the right-hand words start where their own grid track starts, so no
     glyph is ever under the image. The 32px nudge on this grid earlier in this
     file was re-balancing the margin that the pull left on the right; with the
     pull gone the grid is centred already, and the nudge would unbalance it
     (112/48 instead of 80/80 at 1440). See the report: that rule can be
     deleted. */
  .lx-scope .lx-no-writing .lx-gradient-grid { transform: none; }
  .lx-scope .lx-no-writing .lx-gradient-grid-item.lx-hide-landscape { left: 0; }
}

/* English. "prompting" is 37% wider than the template's widest word ("Waiting")
   set at the same size, and the min-content tracks take that width out of the
   handset's: 481px instead of 598px at 1440, and only 112px at 768, where the
   phone was reduced to a sliver. At 390 the words were 455px wide in 358px of
   room and were cut off by main-content's `overflow: clip` ("forgettin").
   These sizes make the longest English word exactly as wide as the template's
   longest word at each breakpoint, so the band keeps the template's own
   composition rather than English's. Ranges do not overlap, so the block is
   order-independent wherever it is pasted. */

@media (min-width: 1440px) {                          /* template: 7.8rem */
  html[lang="en"] .lx-scope .lx-no-writing .lx-big-gradient-text { font-size: 5.7rem; }
}

@media (min-width: 992px) and (max-width: 1439px) {   /* template: 9vw */
  html[lang="en"] .lx-scope .lx-no-writing .lx-big-gradient-text { font-size: 6.55vw; }
}

@media (min-width: 768px) and (max-width: 991px) {    /* template: 6rem */
  html[lang="en"] .lx-scope .lx-no-writing .lx-big-gradient-text { font-size: 4.4rem; }
}

@media (min-width: 480px) and (max-width: 767px) {    /* template: 17vw */
  html[lang="en"] .lx-scope .lx-no-writing .lx-big-gradient-text { font-size: 12.4vw; }
}

@media (max-width: 479px) {                           /* template: 24vw */
  html[lang="en"] .lx-scope .lx-no-writing .lx-big-gradient-text { font-size: 17.5vw; }
}

/* About hero — gather the four metal orbs in from the viewport edges.
 * (STARGO WORK, defect F. Append to css/stargo-fusion.css.)
 *
 * Lifelogx positions the four `.lx-about-image-holder` orbs with percentage insets
 * (top:-70%, inset:-80% -3%, inset:auto auto -130% -3%, inset:auto 10% -130% auto)
 * resolved against `.lx-feature-hero-text-holder` — a shrink-to-fit flex item whose
 * width and height are set by the headline and the paragraph. STARGO's copy is much
 * longer than the donor's, so that box swells to the FULL viewport width between
 * ~992px and ~1900px and runs ~70px taller, and the negative percentages then resolve
 * to hundreds of pixels outside the viewport; the hero's `overflow:hidden` cuts the
 * orbs off — 164px of orb _1 past the left edge at 1440x900 EN, 188px of orb _3
 * below the fold at 390x844 EN, 155/110/60px at the 1351px width the owner reported.
 *
 * The fix keeps the template's four-corner composition, its artwork, its labels and
 * its IX2 float loop untouched — only top/right/bottom/left are changed, never
 * `transform`, which the interaction owns — but re-anchors the insets so they no
 * longer depend on the length of the copy:
 *
 *   - horizontally to the box's own centre, which is always the viewport centre
 *     (the text holder is flex-centred inside a full-bleed `.lx-_100-height`
 *     container), clamped with min() so an orb's outer edge can never reach the
 *     viewport edge, with room left for the float loop's own travel;
 *   - vertically to the text block's top / bottom edge, so the orbs stay clear of
 *     the headline and the paragraph however those wrap, with a vh clamp that keeps
 *     them inside the viewport when the text block is unusually tall.
 *
 * The travel allowed for is lx-a-52 ("about-hero-images") in tools/fragments/lx-ix.json:
 *   _1 x -20..+30  y -30..+30      _2 x -20..+70  y -20..+60
 *   _3 x -20..+30  y -40..+30      _4 x -20..+70  y -20..+40
 */

.lx-scope .lx-hero-about .lx-about-image-holder {
  --orb-w: 10.5rem;                       /* the template's own diameter, unchanged */

  /* viewport centre -> the orb's outer edge */
  --orb-x1: min(550px, 50vw - 100px);
  --orb-x2: min(486px, 50vw - 100px);
  --orb-x3: min(486px, 50vw - 100px);
  --orb-x4: min(367px, 50vw - 110px);

  /* clearance kept between the orb and the text block */
  --orb-g1: 38px;
  --orb-g2: 66px;
  --orb-g3: 60px;
  --orb-g4: 60px;

  /* viewport clamps: the float loop has to stay on screen */
  --orb-z1: calc(44vh - var(--orb-w) - 34px);
  --orb-z2: calc(44vh - var(--orb-w) - 22px);
  --orb-z3: calc(55vh - var(--orb-w) - 42px);
  --orb-z4: calc(55vh - var(--orb-w) - 52px);
}

.lx-scope .lx-hero-about .lx-about-image-holder.lx-_1 {
  top: auto;
  right: auto;
  bottom: min(calc(100% + var(--orb-g1)), calc(50% + var(--orb-z1)));
  left: calc(50% - var(--orb-x1));
}

.lx-scope .lx-hero-about .lx-about-image-holder.lx-_2 {
  top: auto;
  right: calc(50% - var(--orb-x2));
  bottom: min(calc(100% + var(--orb-g2)), calc(50% + var(--orb-z2)));
  left: auto;
}

.lx-scope .lx-hero-about .lx-about-image-holder.lx-_3 {
  top: min(calc(100% + var(--orb-g3)), calc(50% + var(--orb-z3)));
  right: auto;
  bottom: auto;
  left: calc(50% - var(--orb-x3));
}

.lx-scope .lx-hero-about .lx-about-image-holder.lx-_4 {
  top: min(calc(100% + var(--orb-g4)), calc(50% + var(--orb-z4)));
  right: calc(50% - var(--orb-x4));
  bottom: auto;
  left: auto;
}

@media screen and (max-width: 767px) {
  .lx-scope .lx-hero-about .lx-about-image-holder {
    --orb-w: 8rem;                        /* the template's own tablet diameter */
    --orb-x1: min(550px, 50vw - 64px);
    --orb-x2: min(486px, 50vw - 92px);
    --orb-x3: min(486px, 50vw - 56px);
    --orb-x4: min(367px, 50vw - 92px);
    /* clear the "Book a demo" button, which sits right under the text block here */
    --orb-g3: 100px;
    --orb-g4: 100px;
    /* this band centres the hero content slightly higher than the desktop one */
    --orb-z1: calc(42vh - var(--orb-w) - 34px);
    --orb-z2: calc(42vh - var(--orb-w) - 22px);
  }
}

@media screen and (max-width: 479px) {
  .lx-scope .lx-hero-about .lx-about-image-holder {
    --orb-w: 5.8rem;                      /* the template's own phone diameter */
    --orb-x1: min(550px, 50vw - 30px);
    --orb-x2: min(486px, 50vw - 78px);
    --orb-x3: min(486px, 50vw - 22px);
    --orb-x4: min(367px, 50vw - 78px);
    --orb-g3: 110px;
    --orb-g4: 110px;
    /* the phone hero centres its content differently, so the clamps shift with it */
    --orb-z1: calc(52vh - var(--orb-w) - 34px);
    --orb-z2: calc(52vh - var(--orb-w) - 22px);
    --orb-z3: calc(45.5vh - var(--orb-w) - 30px);
    --orb-z4: calc(45.5vh - var(--orb-w) - 34px);
  }
}

/* ---------------------------------------------------------------------------
   About page, "our values" cards — show each graphic inside the card.

   .lx-our-values-holder is a square (aspect-ratio:1) with overflow:hidden, and
   .lx-our-values-text-image inside it is an absolutely-positioned flex column
   with justify-content:space-between and padding 1.7rem 1.2rem 0 — note the
   zero bottom padding. So the graphic, being the last flex child, is pinned
   flush against the card's bottom edge and bleeds off it; and because an <img>
   is a non-shrinking flex item, a heading that wraps onto another line pushes
   the graphic straight past that edge, where overflow:hidden cuts it away.
   Measured on the built pages: 69px of the crosshair cut off at 992w EN,
   22px at 1024w, 15px at 768w, and 4px still gone at 1280w — the Chinese
   headings are shorter, so the same cards lose only 24px / 22px / 15px / 4px.

   Two rules, both in the template's own idiom:
     1. give the flex column a bottom padding mirroring its horizontal padding,
        at each of the three widths the template sets that padding, so the
        graphic sits inside the card instead of bleeding off it;
     2. let the graphic shrink rather than overflow, keeping its aspect ratio
        (object-fit:contain, which also removes the 0.4% vertical stretch the
        default object-fit:fill was applying) and staying bottom-anchored the
        way the template composes the card.

   Card geometry, colours, artwork and the IX2 entrance animation on
   .lx-our-values-grid-item.lx-_1/_2/_3 (opacity 0→1, scale 0.9→1, staggered)
   are all untouched; the cards stay square and equal-height.

   The <img> is matched structurally as well as by class on purpose: the build
   currently emits a malformed `alt=" class="lx-our-values-icon"` attribute, so
   these images carry no class at all in the DOM. The structural selector holds
   both before and after that build bug is fixed.
   --------------------------------------------------------------------------- */

.lx-our-values-text-image {
  padding-bottom: 1.2rem;
}

.lx-our-values-text-image > img,
.lx-our-values-icon {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: center bottom;
}

/* The template widens this padding to 3rem below 768px … */
@media screen and (max-width: 767px) {
  .lx-our-values-text-image {
    padding-bottom: 3rem;
  }
}

/* … and narrows it to 1.5rem below 480px. Mirror both. */
@media screen and (max-width: 479px) {
  .lx-our-values-text-image {
    padding-bottom: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
   capabilities.html — the four macro-area cards ("四个板块")

   Mono ships `.work-title-main` as a 16px white chip pinned to the bottom-right
   corner of the photo (`inset: auto 20px 20px auto`). On the capability map that
   chip IS the card's name — the four areas and their group counts — so at 16px
   in a corner it read as a caption on a 1300x720 photograph.

   This turns it into the card's headline: one frosted-glass panel centred over
   the image, the area name at a display size, the group count as a subordinate
   second line. Real text throughout — no `content:`, no image, so the DOM nodes
   the screen reader and the CN/EN builds rely on are untouched.

   Scope: `.wrok-wrapper` is this card stack, and it occurs exactly once on
   index.html and once on capabilities.html — in both languages — and nowhere
   else on the site, so these rules reach precisely the eight card sets and no
   other use of the shared Mono `.work-title` class. The owner asked for the
   same treatment on the homepage, whose four cards name the traditional way of
   working (传统：询盘在邮箱 …) over much paler photographs than the capability
   page's — which is why the scrim below is set from the worst backdrop pixel
   rather than from how it looks on one image.
   --------------------------------------------------------------------------- */

/* The panel. Centred with `inset: 0 + margin: auto + fit-content` rather than a
   translate, so the panel adds no transform of its own inside a subtree Webflow
   IX2 is already transforming.
   Its containing block is `.work-card` (position: sticky), and `.image-wrap`
   fills that box, so centring on the card centres on the photograph. IX2's
   card reveal (a-215) scales the whole `.work-card` from .70 up to 1 about its
   centre as the stack shuffles; the panel is inside that box, so it scales with
   the photo and stays centred the whole way through — measured offset from the
   image centre is 0.0px horizontally and vertically at every width. */
.wrok-wrapper .work-card .work-title-main {
  inset: 0;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  /* Wide enough that the longest English name ("Workforce & Governance") stays
     on one line at every desktop width, never wider than four fifths of the
     photo so the picture still reads as the card. */
  max-width: min(80%, 52rem);

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.6vw, 12px);
  padding: clamp(20px, 2vw, 34px) clamp(26px, 2.8vw, 48px);
  text-align: center;

  /* Frosted glass. The scrim alpha is set by measurement, not taste: the four
     photographs run from a bright sunset port to a dark warehouse, and white
     text needs the composited backdrop under it at relative luminance <= 0.183
     to clear 4.5:1. Blur alone does not darken a bright sky, so the blur is
     paired with a scrim that holds the worst case. */
  background-color: rgba(10, 11, 13, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  /* 14px sits in the same family as the 12px card radius. */
  border-radius: 14px;
  /* The hairline is what makes it read as glass rather than as a flat box. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 18px 50px rgba(0, 0, 0, 0.28);

  /* The panel now covers the middle of a card that is one big <a>. Letting the
     pointer through keeps the whole photo the hit target and leaves any
     hover/parallax on `.image-wrap` (a sibling, so a hovered panel would not
     have hovered it) running exactly as before. */
  pointer-events: none;
  letter-spacing: normal;
}

/* No backdrop-filter (older Firefox, engines with it disabled): the blur is
   simply absent, so the title would otherwise land as white text on a raw
   photo. Trade translucency for a scrim that carries the contrast on its own. */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .wrok-wrapper .work-card .work-title-main {
    background-color: rgba(10, 11, 13, 0.74);
  }
}

/* The area name. Fluid so it fills the panel at every width without ever
   needing a per-breakpoint font size; the ceiling stops it growing past the
   panel on very wide screens. `text-wrap: balance` is what keeps the longer
   English names ("Workforce & Governance") from breaking to a lone word. */
.wrok-wrapper .work-card .work-title-main .work-title.b {
  color: #fff;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* The count ("3 组" / "5 groups"). Subordinate by size and weight, not by the
   0.36 opacity Mono uses for the corner chip — at that opacity the second line
   would sit near 2:1 against the frosted backdrop. */
.wrok-wrapper .work-card .work-title-main .copy-flex {
  opacity: 1;
  /* Mono glues the number and the unit together (`3组`, `3groups`); a small
     optical gap is what the pair needs at this size, and it is also the CN
     convention for a digit next to a Chinese character. */
  gap: 0.3em;
  align-items: baseline;
}

.wrok-wrapper .work-card .work-title-main .copy-flex .work-title {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: var(--font-weight--400, 400);
  line-height: 1.25;
  letter-spacing: 0.04em;
}

/* Tablet and below: the photo is a much smaller box (450px, then 320px, then
   240px tall), so the ceiling comes down with it and the padding tightens.
   Values chosen so the CN name stays on one line everywhere and the longest
   English name never breaks to a single word. */
@media screen and (max-width: 991px) {
  .wrok-wrapper .work-card .work-title-main {
    /* 34rem left "Workforce & Governance" 8px short of one line at 991 and
       broke it after the ampersand; 38rem clears it with room to spare and is
       still under two thirds of the photo's width. */
    max-width: min(88%, 38rem);
    padding: clamp(16px, 2.2vw, 26px) clamp(20px, 3vw, 34px);
  }

  .wrok-wrapper .work-card .work-title-main .work-title.b {
    font-size: clamp(1.9rem, 5vw, 2.9rem);
  }

  .wrok-wrapper .work-card .work-title-main .copy-flex .work-title {
    font-size: clamp(0.95rem, 1.9vw, 1.15rem);
  }
}

@media screen and (max-width: 767px) {
  .wrok-wrapper .work-card .work-title-main {
    max-width: 86%;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      0 12px 30px rgba(0, 0, 0, 0.26);
  }

  .wrok-wrapper .work-card .work-title-main .work-title.b {
    font-size: clamp(1.55rem, 6.4vw, 2.4rem);
  }

  .wrok-wrapper .work-card .work-title-main .copy-flex .work-title {
    font-size: clamp(0.9rem, 3.4vw, 1.05rem);
  }
}

/* ======================================================================
   Owner review: 「文字单独一个字在一行这样进来不要出现，会感觉很奇怪」
   — a heading must never drop a single character onto a line by itself.

   Reported case: capabilities.html, the qx-projects mission heading
   `<h2 class="qx-h2 qx-project-title-mw">让 AI 团队把活干完</h2>`, which broke
   as 「让 AI 团队把活干」/「完」 at every width from 1024 up.

   The sweep behind these rules: every h1–h4 on all 13 Chinese pages was
   measured in Chromium at 21 viewport widths (360, 390, 414, 480, 540, 600,
   700, 768, 834, 900, 960, 991, 1024, 1100, 1200, 1280, 1366, 1440, 1600,
   1728, 1920) by walking each heading's text nodes with a Range and grouping
   the per-character client rects into real line boxes. 41 heading/width
   combinations stranded a single character (or a lone 。) on a line. The
   selectors below are exactly the classes those headings carry — nothing
   broader, because these pages stack four donors' stylesheets and a bare
   element rule would leak across all of them.

   Line-breaking only. No font-size, weight, colour, letter-spacing, tracking
   or copy is touched, and across all 21 widths not one heading changed its
   LINE COUNT — only where inside the heading the break falls. Nothing here
   animates, so prefers-reduced-motion has nothing to answer for.

   Scoped to `html[lang^="zh"]`: the defect is a CJK one, and the English
   pages (lang="en") are left byte-identical in layout — measured, 0 wrapping
   changes on all 13 English pages at the same 21 widths.
   ====================================================================== */

/* `text-wrap: balance` — the tool for the short display headings. It is
   supported for CJK in every engine that has it (verified in Chromium here:
   「让 AI 团队把活干完」 goes from 「…把活干」/「完」 to 「让 AI 团队」/
   「把活干完」), and where it is not supported the heading simply keeps the
   break it has today, so there is no fallback to get wrong.

   The Mono headings are split per letter by GSAP into inline-block masks;
   balance still resolves their line boxes correctly and the reveal animation
   is unchanged — checked on screen, not just in the numbers. */
html[lang^="zh"] .qx-projects .qx-h2,
html[lang^="zh"] .cn-faq .cn-accordion-heading,
html[lang^="zh"] .cn-produce .cn-accordion-heading,
html[lang^="zh"] .cn-service .cn-accordion-heading,
html[lang^="zh"] .lx-scope .lx-heading-style-h1,
html[lang^="zh"] .lx-scope .lx-heading-style-h2,
html[lang^="zh"] .lx-scope .lx-heading-style-h3,
html[lang^="zh"] .lx-scope .lx-heading-style-h4,
html[lang^="zh"] .lx-scope .lx-big-text,
html[lang^="zh"] .lx-scope .lx-cta-text,
html[lang^="zh"] h2.h2,
/* The three cross-fading comparison headlines (#compare on the homepage, the
   ladder on capabilities). Added after the sweep above: at 1920 「AI 原生外贸。」
   dropped 「贸。」 onto a line of its own. They are `h2.pricing-txt`, not
   `h2.h2`, so the rule above did not reach them. Balance is a no-op on the
   one-line ladder headlines, which must stay one line. */
html[lang^="zh"] h2.pricing-txt,
html[lang^="zh"] h1.inner-title,
html[lang^="zh"] h2.inner-title,
html[lang^="zh"] .title-text-animattion h1,
html[lang^="zh"] .title-text-animattion h2 {
  text-wrap: balance;
}

/* `text-wrap: pretty` for the three places balance cannot or should not do
   the job. Higher specificity than the block above, so these win.

   1. `.h2._01.sm._600` is Mono's long body copy marked up as a heading —
      enterprise.html runs to seven lines and ended 「…再定下一」/「条。」.
      A balancer is defined to give up past the UA's line limit, and it does:
      the seven lines came back unchanged. `pretty` only reworks the tail and
      lands on 「…再定下一条。」. It also leaves the other `_600` paragraphs
      on index/capabilities exactly as the template breaks them, which
      balance did not.

   2. `.lx-blog-title` is a list of six card titles. Balance re-broke all six
      to fix the two that were wrong; `pretty` fixes the two
      (「…AI 操作系」/「统」 → 「…AI 操作」/「系统」) and leaves the rest
      alone — the smaller deviation from the donor.

   3. A heading carrying <br> has forced breaks, and balance is a no-op on it.
      intelligence.html's story card 「长任务执行 / 数小时、数天、数周 /
      中断后仍知道下一步」 stranded BOTH 「周」 and 「步」; pretty fixes both
      segments. `:has(br)` is how the forced-break case is selected without
      touching the other lx h4s, which balance handles better. */
html[lang^="zh"] h2.h2._01.sm._600,
html[lang^="zh"] .lx-scope .lx-blog-title,
html[lang^="zh"] .lx-scope .lx-heading-style-h4:has(br) {
  text-wrap: pretty;
}

/* NOT fixed here, and deliberately so: capabilities.html
   `.cn-service .cn-top-title .cn-heading-style-h2` = 「每一项」, between
   992px and roughly 1089px viewport. The donor steps that heading from 8rem
   to 10rem at the 992px breakpoint while its grid column is still half of a
   ~944px container, so the three characters need 484.8px and get 440–470px.
   No line-breaking value can help: the text does not fit on one line, and at
   three characters any break leaves one of them alone. `word-break: keep-all`
   would only push the overflow into `.cn-title-wrapper`'s `overflow: hidden`
   and clip 「项」. It needs either a font-size step for that window or a
   different word — an owner decision, not a CSS one. */

/* The closing wordmark, STARGO over WORK, between 992 and 1439px.
   ------------------------------------------------------------------------
   Mono sets these two at 11rem and GSAP splits them into one inline-block per
   character, so the browser may break BETWEEN letters — which it did, as
   STAR|GO and WOR|K. Measured: the word needs 708px on one line and the
   element's computed width is 707.6px at 1440 (it just fits, which is why the
   template looks right there), 693px at 1280 and 551.6px at 1024. So the type
   has to come down with the column, and only in that band: at 1440 and above
   the donor's own size already fits, and below 992 the donor has already
   stepped it to 5.76rem / 4.6875rem, which fits too.

   13.1vw is the largest that holds the longest of the two words on one line
   across the whole band — 167.7px at 1280 against the 172.3px available, 134.1
   against 137.1 at 1024, 129.9 against 132.8 at 992 — and min() keeps the
   donor's 11rem wherever 11rem is the smaller of the two. `nowrap` is the
   belt: if a sub-pixel rounding ever left the word a hair too wide, a 1px
   overflow of a decorative wordmark is better than splitting a letter off. */
@media screen and (min-width: 992px) and (max-width: 1439px) {
  .bottom-grid._2.for-hr h1.h1,
  .bottom-grid._2.for-hr h2.h1 {
    font-size: min(11rem, 13.1vw);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   The capability page's donor blocks style themselves.

   Each block arrives with its donor's own stylesheet, reduced to the rules it
   uses and scoped to its own root class (css/renok.rk.css, qubix.qx.css,
   cinery.cn2.css — written by tools/capability-donors.mjs, never by hand), and
   any hand-written rule a block needs lives beside its module in
   tools/blocks/<id>.css. Nothing block-specific belongs in this file: those
   sheets load before this one, so a rule here would silently override the block
   that owns it. See tools/blocks/README.md.
   --------------------------------------------------------------------------- */



/* The homepage hero on a short phone: the call to action lands on the wordmark.
   ---------------------------------------------------------------------------
   `.hero-agency` is `height: 100vh; position: sticky` inside a 300vh
   `.hero-track`, and the hero's two rows are both out of flow: the copy
   (`.container-bottom.add-px`) is pinned by `top`, the closing wordmark
   (`.container-bottom.bottom`) by `bottom`. Neither knows how tall the other
   is, so on a short window they simply meet. Measured on the built page at
   375x667 (an iPhone SE, and the shortest phone in common use):

       预约演示      383..434     STARGO  415..478     19px of overlap
       Book a Demo   406..457     STARGO  415..478     42px of overlap

   and the button is drawn straight through the letterforms — both are solid
   black, so the label and the word destroy each other. It clears on its own at
   about 686px of viewport height in Chinese and 709px in English; every phone
   at 800px and up (360x800, 390x844, 393x852, 430x932) was already correct and
   must not change.

   The hero's height is not available to fix: it is the sticky 100vh panel the
   whole 300vh scroll choreography is timed against. What is available is the
   wordmark's size. The block is bottom-anchored, so shrinking the type moves
   its top DOWN, away from the button, and moves nothing else: grid height is
   `2 x 0.85em + 10px` (measured 137.5px at the donor's 4.6875rem/75px), and the
   button needs the top at 465px in the worse of the two languages, which is
   87px of grid, which is 45px of type.

   6.5vh gives 43.4px at 667 and 46.8px at 720 — inside the budget at both, and
   `min()` keeps the donor's own 4.6875rem wherever that is already the smaller.
   The query is gated on height as well as width because this is a height
   problem: a 390x844 phone keeps the wordmark exactly as the template drew it.
   The copyright line above is untouched — it is real text at 14px and shrinking
   it would trade a collision for an unreadable line. */
@media screen and (max-width: 767px) and (max-height: 720px) {
  .hero .container-bottom.bottom .bottom-grid._2 h1.h1,
  .hero .container-bottom.bottom .bottom-grid._2 h2.h1 {
    font-size: min(4.6875rem, 6.5vh);
  }
}


/* Touch targets: the standalone links a finger has to hit.
   ---------------------------------------------------------------------------
   Measured on the built page with touch emulation: the navigation's
   `.button-link` is 74x25 on a phone and 63x18 on an iPad in landscape, and the
   footer's `.legal-link` is 62x20. Both are standalone controls, and both are
   under the 24x24 CSS pixels WCAG 2.5.8 asks for on the short axis — 18px in
   the worst case, which is a link you aim at rather than tap.

   The fix is padding, not size: the text does not move and nothing is
   restyled, the box around it simply grows to a finger. `(pointer: coarse)`
   scopes it to touch input, so a mouse-driven desktop keeps the navigation row
   exactly as the template drew it — the defect is a touch defect and the cure
   belongs where the defect is.

   The privacy link inside the contact form's consent sentence is deliberately
   NOT here. It is an inline link in a run of prose, which 2.5.8 exempts, and
   padding it would open gaps in the middle of the sentence. */
@media (pointer: coarse) {
  /* Every `.button-link`, not only the two in the bar: the same class builds
     the slide-out menu's list, and those were still 111x17 when the rule named
     `.navbar` and `.navigation-text-main` alone — the menu is the one a phone
     actually navigates with. */
  a.button-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .legal-link {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}


/* The homepage's 「认识 AI 员工」 pill, drawn across the copy beside it.
   ---------------------------------------------------------------------------
   In the "288 位专业 AI 员工" card the pill sits at the left of the card's
   bottom row and `.team-circle.btm` — the label and the two heading lines —
   sits to its right, anchored by `right: 20px` at a fixed width. The width
   does not come down with the card, so as the column narrows the block's LEFT
   edge walks left until it is on top of the pill. Measured on the built page,
   with the section settled (not mid-entrance):

       768   pill 40..174   text 116..354   59 x 43 overlapped
       800   pill 40..174   text 132..370   43 x 43
       834   pill 42..176   text 149..387   27 x 43
       900+  pill 40..174   text 182..420   clear
       <768  the card is wider relative to the pill and it is clear again

   At 768 that hides the first two characters of both heading lines, so the
   sentence starts mid-word. Capping the block's width keeps the donor's
   right-hand anchor and its side-by-side composition, and simply stops it
   before the pill: 200px is the pill's own width plus the card's padding and a
   gap, so the text starts at 195 against the pill's 174 at the tightest width
   in the band. `left: auto` is restated because the used value the browser
   derives from `right` + `width` is what was walking left. */
@media screen and (min-width: 768px) and (max-width: 899px) {
  .card-half .team-circle.btm {
    left: auto;
    max-width: calc(100% - 200px);
  }
}


/* The pricing-ladder orb, dipping into the line below it at 768.
   ---------------------------------------------------------------------------
   The orb is set inline in `.h2.for-stats` and sunk `-0.14em` so it sits on the
   type's baseline. At 768 the Chinese title wraps to two lines and the sink
   puts the orb's box 0.92px past the top of the second line's glyph box — 46
   square px of overlap against the 40 this repo's own verifier allows
   (tools/verify-restore.mjs, "ladder orb overlaps the title glyphs"). Measured
   identically before and after today's work, so it is not new; it has simply
   never been chased.

   Lifting the sink to -0.06em at 768..991 clears it, and lifting is the safe
   direction: it moves the orb AWAY from the line below and further into its own
   line box, where there is room. Above 991 the title does not wrap and the
   donor's own -0.14em is kept. */
@media screen and (max-width: 991px) {
  .h2.for-stats .video-logo.for-sct.stargo-inline-orb {
    vertical-align: -0.06em;
  }
}


/* The open menu's own links, on the pricing page.
   ---------------------------------------------------------------------------
   `.absolute-main` is an empty decorative div inside `.menu-wrapper`
   (`<div class="absolute-main"></div>`, no content and no children). It
   computes `z-index: 9999; pointer-events: auto`, while the menu it sits in is
   `z-index: 222` — so on the pricing page it lies across the menu's own links
   and swallows every click. Measured on production with the menu open at 1440:
   the 「定价」 item is drawn at 1142,485 92x50 and `elementFromPoint` at its
   centre returns `DIV.absolute-main`, not the link; a real click times out.

   Not a regression from the cinery/renok rebuild — the previous deployment
   behaves identically on /pricing, and the homepage menu works on both. It has
   simply never been caught, because the site's mobile audit measured tap-target
   SIZES and never actually tapped a menu item.

   An empty decorative layer has nothing to receive a click for, so it stops
   taking them. Nothing about its size, paint, stacking or animation changes —
   only whether it is in the hit-test path.

   Scoping it under `.menu-wrapper` was the first attempt and it matched
   nothing: on the pages built through inMonoShell the element is a direct
   child of `<body>` (measured parent chain on /pricing:
   `body.stargo-dark-page.stargo-pricing-lx`), full-viewport at 0,0 1440x900,
   while on the contact page it sits inside `.main-content` at -216,45 and
   never covers the menu. Same class, two different positions in the tree — so
   the rule is written against the class itself. */
.absolute-main {
  pointer-events: none;
}


/* The hero wordmark on a large phone — 「STARG / O / WORK」.
   ---------------------------------------------------------------------------
   Reported from a real handset (2026-09-16) and reproduced at 412px and 430px:
   the homepage hero card shrinks as the page scrolls, and inside the narrowed
   card 「STARGO」 no longer fits on one line, so the browser breaks the word and
   drops the O onto a line of its own. Measured at 430x800 after scrolling 600px:
   the word's box is 258px wide at the donor's 75px, and the text needs more
   than that — height 108px, i.e. two line boxes, against 54px at 393 and below.

   Neither existing wordmark rule reaches it. One is gated `min-width: 992px`
   (desktop), the other `max-width: 767px AND max-height: 720px` — a 430x800
   phone satisfies the width but not the height, so it fell through to the
   template's own size.

   WHY THIS WAS NOT CAUGHT: every mobile pass on this site used 375, 390, 393,
   768 and 1024. 412 and 430 — where most large Android handsets and the Pro
   Max iPhones live — were never in the set, so the hole in the width list was
   exactly where the defect was. The widths below are now the ones the audit
   walks.

   `nowrap` is what actually forbids the break; the clamp is what keeps the
   unbroken word inside the shrunken card. 15.5vw measured against the card's
   own inner width: 66.6px at 430 (card 257), 63.9 at 412, 60.5 at 390, 49.6 at
   320 — each comfortably inside. `min()` keeps the donor's 4.6875rem wherever
   that is already smaller, so nothing grows. */
@media screen and (max-width: 767px) {
  .hero .container-bottom.bottom .bottom-grid._2 h1.h1,
  .hero .container-bottom.bottom .bottom-grid._2 h2.h1 {
    font-size: min(4.6875rem, 15.5vw);
    white-space: nowrap;
  }
}


/* The footer on a phone: the same information the desktop footer carries.
   ---------------------------------------------------------------------------
   Measured on the built pages at 320 / 360 / 375 / 390 / 393 / 412 / 430 (and
   768 / 834 / 1024, which are NOT affected — everything below is gated at
   767px and 479px). Reported on index, intelligence, workforce, enterprise,
   pricing, about, contact and blog; the footer is one block built by
   tools/chrome.mjs, so it is one defect on eight pages.

   Three pieces of information were dropped on a phone:
     - the 「WhatsApp」 label before +86 187 7512 7878, leaving a bare number
       with no channel on it  (fixed in the `.stargo-wa` rule above);
     - the 「(一般咨询)」 column heading over www.stargomoto.com, so the URL was
       orphaned under 「(商务合作)」 and read as a third business contact;
     - the whole 「(社交)」 heading and its three round social buttons.

   ONE CAUSE UNDERNEATH ALL OF IT. `.footer-bottom-grid` is a grid with
   `place-items: start stretch` — in a grid that is "top-align the two columns,
   let each fill its track". Below 768px the template flips it to
   `display: flex; flex-flow: column`, and in a column flexbox the two axes
   swap: `align-items: start` is now the HORIZONTAL one, so both
   `.footer-btm-part-1` blocks shrink-to-fit instead of filling the row. Webflow
   patched the divider between them (`.line-vertical { width: 100% }` at 767)
   and never the parts themselves. Measured before: the lower part is
   158.3px wide at EVERY phone width — 320, 360, 375, 390, 393, 412 and 430 all
   give exactly 158.3px, because it is the block's max-content width and no
   longer has anything to do with the screen. On a 430px phone that is 37% of
   the viewport with 255px of dead black beside it, and every grid inside it is
   sized from that 158.3px rather than from the screen: the pages grid ran two
   74.2px columns, which its longest label (「企业与治理」, 71.5px) cleared by
   2.7px, and the address row computed four 32.1px tracks.

   Fix 1 — give the parts the row they are in, in the template's own idiom: the
   same `width: 100%` Webflow wrote for the divider at the same breakpoint.
   Measured after: the lower part is 307px at 320, 346 at 360, 360 at 375, 374
   at 390/393, 396 at 412 and 413 at 430 — the row it sits in, at every width —
   and the pages grid's columns go from 74.2px to 148.5-201.5px, so no label
   overflows its column any more. */
@media screen and (max-width: 767px) {
  .footer .footer-bottom-grid > .footer-btm-part-1 { width: 100%; }
}

/* Fix 2 — restore the two hidden headings and the social buttons, and pair each
   heading with the thing it names.
   ---------------------------------------------------------------------------
   Below 479px the Mono template hides `.top-text.opc.hdi` (the SECOND heading
   of each pair — 「(一般咨询)」 and 「(社交)」) and `.social-content` (the three
   round buttons) outright, and it has a reason: the heading pair is a
   two-column grid while the contact pair below it collapses to a single stacked
   column, so an un-hidden second heading would sit to the right of the first
   with nothing under it — the column-labels-above-nothing defect. It also still
   carries the desktop placement `grid-area: 1 / 3 / 2 / 5`, i.e. columns 3-4 of
   a grid that now has two, which is what made the address row compute four
   32.1px tracks instead of three.

   So the answer is not "show them where the desktop puts them". The phone
   footer is a stack, and in a stack a heading belongs immediately above its own
   group. `display: contents` dissolves the heading grid, the 20px spacer and
   the contact grid, which promotes their four cells into one flex column on the
   block wrapper; `order` then interleaves them heading / group / heading /
   group. The grid placements the cells carry become inert the moment their
   grid is gone, so nothing has to be unset. No markup changes: the
   `data-w-id`s, the Webflow node ids and the link structure are all untouched,
   and the reveal animation on the footer is not addressed here at all.

   Scope: `.footer-btm-part-1 > .margin-50 > div` is exactly the two paired
   blocks (contact and address). The 「(页面)」 block above them is built
   differently — a bare <p> heading followed by `.margin-20`, not a heading grid
   — and it is not inside a `.margin-50`, so it keeps the template's layout.

   Spacing is the template's own two numbers: 20px (`--page-margin--divider-small`,
   the `.margin-20` the template already puts between a heading row and its
   content row) between a heading and its group, and 20+10 = 30px
   (`.footer-small-grid`'s own `grid-row-gap`) before the second heading, so the
   pair still reads as one block against the 50px `.margin-50` that separates it
   from the next.

   Measured after, at 430, the block reads top to bottom as 「(商务合作)」 /
   sales@stargomoto.com / WhatsApp +86 187 7512 7878 / 「(一般咨询)」 /
   www.stargomoto.com / 「(地址)」 / 柳州 · 广西 · 中国 / 「(社交)」 / the three
   round buttons. Heading top to the first line of the group it names: 41px
   every time (49px for the buttons, which are a 32px row rather than a line of
   type). Group to the NEXT heading: 55px and 46px inside a pair, against 74px
   where the `.margin-50` separates the contact pair from the address pair — so
   a pair still reads as one block. Every row is 413px wide (307px at 320), the
   document's scrollWidth equals the viewport at all of 320 / 360 / 375 / 390 /
   393 / 412 / 430, and the order is the same at every one of them. */
@media screen and (max-width: 479px) {
  .footer .footer-btm-part-1 > .margin-50 > div {
    display: flex;
    flex-flow: column;
    row-gap: 20px;
  }

  .footer .footer-btm-part-1 > .margin-50 > div > .footer-small-grid,
  .footer .footer-btm-part-1 > .margin-50 > div > .margin-20,
  .footer .footer-btm-part-1 > .margin-50 > div > .margin-20 > .footer-small-grid.sec {
    display: contents;
  }

  .footer .footer-btm-part-1 > .margin-50 .top-text.opc { order: 1; }
  .footer .footer-btm-part-1 > .margin-50 .footer-small-grid.sec > .flex-item:first-child { order: 2; }
  /* `display: block` is what un-hides it; the template's own rule is
     `.top-text.opc.hdi { display: none }` inside its 479px block. */
  .footer .footer-btm-part-1 > .margin-50 .top-text.opc.hdi {
    order: 3;
    display: block;
    margin-top: 10px;
  }
  .footer .footer-btm-part-1 > .margin-50 .footer-small-grid.sec > .flex-item:last-child { order: 4; }

  /* The template's blanket `.hide-mobile, .social-content { display: none }`.
     The footer's copy of it is the only way to reach the site's e-mail,
     WhatsApp and corporate site as buttons, so it comes back as the flex row
     `.social-content` is everywhere else. */
  .footer .footer-btm-part-1 .social-content.for-footer { display: flex; }
}


/* Headings that break mid-word, or strand one character, on a phone.
   ---------------------------------------------------------------------------
   A second pass over the sweep further up this file ("文字单独一个字在一行").
   That sweep measured 21 widths from 360 up and reached for `text-wrap:
   balance` / `pretty`; these five cases are the ones it could not have caught,
   because 412 and 430 were not in its width list and because a balancer cannot
   help when the break it has to avoid is BETWEEN TWO HAN CHARACTERS OF ONE
   WORD rather than at the end of a line.

   Measured at 320 / 360 / 375 / 390 / 393 / 412 / 430 in Chromium, by walking
   each heading's text nodes with a Range and grouping the per-character rects
   into real line boxes. Scoped `html[lang^="zh"]` like the sweep above: every
   case here is a CJK line-breaking defect, and the English pages are left
   exactly as the donors draw them (verified: the same probe on the en/ pages reports
   identical line boxes before and after). Nothing here animates. */

/* 1. intelligence.html, the closing statement 「主动，不是被动」 at 64px.
      Seven characters need 448px and the element is 320-430px wide, so it MUST
      take two lines; `text-wrap: balance` (already on it, from the sweep above)
      duly balanced them 4 / 3 — and put the break inside 不是:
      「主动，不」/「是被动」 at all seven widths.

      No balancer can fix that, because in CJK every inter-character position is
      a legal break and balance is choosing between legal breaks. `word-break:
      keep-all` is the property that removes the illegal ones: it suppresses the
      soft-wrap opportunities between Han characters, leaving the comma as the
      only break in the string. Measured after: 「主动，」/「不是被动」 at 320,
      360, 375, 390, 393, 412 and 430. The longer of the two runs is four
      characters — 256px — against 320px at the narrowest width, so keep-all can
      never push it out of the box. The file already uses this exact idiom on
      `.lx-hero-text`.

      Scoped to the CTA band's statement: `.lx-big-text` appears once on the
      site (workforce's gradient word is `.lx-big-text-on-gradient`, a different
      class), and keep-all must never reach a heading with no punctuation in it,
      which would then have no break opportunity at all. */
html[lang^="zh"] .lx-scope .lx-cta_wrapper .lx-big-text { word-break: keep-all; }

/* 2. intelligence.html, the hero sub-headline 「不是聊天机器人，是运营层。」 at
      32px in a 288-398px box. Thirteen characters need 416px, so again two
      lines, and the browser broke inside 运营层, leaving 「层。」 alone at 390,
      393, 412 and 430 (and splitting 运营 at 360/375). Same cure, same reason,
      plus balance so the two runs sit either side of the comma rather than the
      first line running long. Measured after, all seven widths:
      「不是聊天机器人，」 / 「是运营层。」 — 256px and 160px, both inside the
      288px box at 320. */
html[lang^="zh"] .lx-scope .lx-hero-desc { word-break: keep-all; text-wrap: balance; }

/* 3. about.html, the first AI-employee card title 「市场信号 AI 员工」 at 20px
      in a 88-143px grid cell. At 412 and 430 it read 「市场信号 AI 员」/「工」 —
      the orphan 工 the owner objects to. The string has two real spaces in it
      (around the product noun "AI"), so keep-all leaves three break points and
      the browser picks the ones that fit: measured after, 「市场信号」/「AI 员工」
      at 320 and 「市场信号 AI」/「员工」 at 360, 375, 390, 393, 412 and 430.

      `text-wrap: balance` was tried first and is WRONG here: it equalises the
      two lines to 「市场信」/「号 AI 员工」, which splits 市场信号 — a worse
      defect than the one being fixed. Recorded so the next pass does not
      repeat it. */
html[lang^="zh"] .cn-case-study-item .cn-text-size-medium { word-break: keep-all; }

/* 4. workforce.html, the sticky-note card inside the 「订单与单证」 band:
      「真正能干活的工作台」, nine characters at 17.6px in a card the donor sizes
      at 32% of its collage. Measured box: 46px at 320, 58 at 360, 62 at 375, 66
      at 390, 67 at 393, 73 at 412, 78 at 430 — so three or four glyphs a line.
      At 390, 393, 412 and 430 it came out 4 / 4 / 1 with 「台」 alone.

      `pretty` is the right tool rather than `balance`: it reworks only the tail,
      and measured after it gives 「真正能」/「干活的工」/「作台」 at 390-430 (no
      short line), leaves 360 and 375 at the 3 / 3 / 3 they already had, and
      leaves 768 / 834 / 1024 at the 5 / 4 the donor draws — line boxes
      identical before and after at those three widths.

      NOT fixed at 320, deliberately: the card is 46px there, which is two
      glyphs, so nine characters need five lines and one of them has to hold a
      single character. No line-breaking value changes that. `balance` was tried
      and is worse — it moves the lone character to the FIRST line
      (「真」/「正能」/…), which reads as a mistake rather than as a tail. */
html[lang^="zh"] .lx-scope .lx-confirmation-card .lx-text-size-medium { text-wrap: pretty; }

/* 5. capabilities.html, 「每件事都跑在」 ⚫ 「这个底座上」 — one sentence the
      donor splits into two elements either side of the decorative sphere.
      ---------------------------------------------------------------------
      On a phone the donor keeps that as a flex ROW and gives the sphere
      `width: 25vw` of it (`.qx-wrapper-image-change-service` below 479px), so
      the eleven characters of the sentence have `100vw - 32px - 25vw` between
      them: 208px at 320 and 290px at 430. At the donor's own 32px they need
      338px, so BOTH halves wrapped and the sentence was drawn as four lines
      around the sphere — 「每件事都 / 跑在」 ⚫ 「这个底座 / 上」 at 320-393, and
      「每件事都跑 / 在」 ⚫ 「这个底座 / 上」 at 412 and 430. Read in any order
      that is not one line each, it is not a sentence.

      A line-breaking value cannot help: the text does not fit, and every split
      of a six- and a five-character phrase leaves a fragment. The sphere cannot
      give the room back either — at 320 the eleven characters need 338px
      against 288px of container with the sphere removed entirely. So the type
      has to come down with the screen, and only where it must: above 479px the
      donor's own steps already fit (measured one line each at 768, 834 and
      1024 at the donor's 42px, unchanged by this rule).

      The size is measured, not chosen. A character of this face at this
      tracking paints 0.961 em, so eleven of them fit when
      font <= (0.75 * vw - 32px) / 10.57, which is 6.98vw - 3.03px. 6.8vw - 3.1px
      sits just under that line at every width and leaves the sentence 4-5px
      clear of the container on each side: measured after, one line each at
      18.66px / 320, 21.38 / 360, 22.40 / 375, 23.42 / 390, 23.62 / 393,
      24.92 / 412, 26.14 / 430, with the row painting 20..300 inside 16..304 at
      320 and 21..409 inside 16..414 at 430. `min()` keeps the donor's 32px
      wherever 32px is already the smaller, so nothing grows, and `nowrap` is
      the belt: the whole point is that these two phrases are single lines. */
@media screen and (max-width: 479px) {
  html[lang^="zh"] .qx-whatwedo .qx-wrapper-content-service .qx-h2,
  html[lang^="zh"] .qx-whatwedo .qx-wrapper-content-service .qx-text-heading-servie {
    font-size: min(32px, calc(6.8vw - 3.1px));
    white-space: nowrap;
  }
}


/* Text cut off by the screen edge, or by the box it sits in.
   ---------------------------------------------------------------------------
   Three separate places, one habit behind them: a donor sized something for
   its own word or its own card, our word or our card is a different size, and
   the difference lands outside a box that clips.

   All three were measured by walking DOWN the page in ~160px steps until the
   element settled, then reading per-character rects — these sections carry
   scroll reveals whose toggleActions reverse, and a frame taken on the way back
   up is a half-played animation, not a layout. */

/* 1. blog (and about, intelligence, workforce and the six article pages — the
      shared lifelogx closing snippet): the display wordmark 「STARGO」, sliced
      at BOTH edges. The S was cut through its bowl, the final O cut in half.
      -----------------------------------------------------------------------
      Lifelogx sets `.lx-text-extra-big` (and the outlined copy behind it,
      `.lx-text-extra-big-stroke`) at 24vw, and steps it UP to 26vw below 768px.
      That step is sized for the donor's own word: eight narrow lowercase
      letters. Ours is six capitals, which is wider per character, and 26vw
      makes it 1.07x the viewport. `.lx-text-extrabig-loop-wrap` is
      `overflow: hidden`, so the surplus is not a bleed, it is a cut.

      Measured settled (the word carries a scale 0.9 -> 1 reveal; these are the
      numbers after it lands), word box against viewport:

          320  -11..331   360  -13..373   375  -13..388   390  -14..404
          393  -14..407   412  -14..426   430  -15..445   479  -17..496
          480  -17..497   600  -21..621   767  -27..794
          768    5..763   834    5..829  1024    7..1018   <- 24vw, fits

      So the defect is the whole 26vw band, 320 through 767, and the fix is to
      drop that band back to the donor's own 24vw — the value it uses at every
      other width. That is not a size invented here: at 768 the donor's 24vw
      already draws this word 5px from each edge, and 24vw keeps exactly that
      proportion all the way down. Measured after: 2..318 at 320, 2..373 at 375,
      3..427 at 430, 3..476 at 479, 3..477 at 480, 4..596 at 600, 5..762 at 767,
      and 768 and up untouched at 5..763. The step across the 768 breakpoint is
      now 184.08px -> 184.32px, i.e. invisible. */
@media screen and (max-width: 767px) {
  .lx-scope .lx-text-extra-big,
  .lx-scope .lx-text-extra-big-stroke { font-size: 24vw; }
}

@media screen and (max-width: 479px) {
  /* 2. intelligence, the gradient headline in the 「不再 / 等提示 / 等回复 /
        丢上下文」 band. The four words cross-fade in one place, so they share a
        size; the longest, 「丢上下文」, is four characters, and below 480px the
        donor sets 24vw. A character of this face at this size paints almost
        exactly 1em, so four of them are 96vw — and the band starts at the
        section's own 16px gutter, so the word ends at 96vw + 16px.

        Measured before (word box against the viewport, and against its own
        16px-gutter track):

            320  16..323  track 16..304   right edge 3px PAST the viewport
            360  16..362  track 16..344   2px past
            375  16..376  track 16..359   1px past
            390  16..390  track 16..374   flush with the viewport edge
            393  16..393  track 16..377   flush
            412  16..412  track 16..396   flush
            430  16..429  track 16..414   1px inside

        i.e. from 390 up the final 文 sits hard against the edge with
        `main-content`'s `overflow: clip` on it, and below 390 it is past it.
        The English copy already has its own sizes in this band further up this
        file; this is the Chinese half of the same problem, so it is written the
        same way and scoped the same way.

        Four characters fit the gutter when the size is at most
        (vw - 32px) / 4 = 25vw - 8px; 25vw - 10px leaves 4px of air on each side
        at every width. Measured after: 20..300 in 16..304 at 320, 20..340 in
        16..344 at 360, 20..355 in 16..359 at 375, 20..370 in 16..374 at 390,
        20..373 in 16..377 at 393, 20..392 in 16..396 at 412, 20..410 in
        16..414 at 430. `min()` keeps the donor's own 24vw wherever 24vw is
        already the smaller of the two, so nothing grows. */
  html[lang^="zh"] .lx-scope .lx-no-writing .lx-big-gradient-text {
    font-size: min(24vw, calc(25vw - 10px));
  }

  /* 3. workforce, the scattered photo cards under the CTA: a line of white text
        sliced horizontally through the middle, showing only the top half of the
        glyphs (「市场信号 AI」 on the laptop tile).
        --------------------------------------------------------------------
        Each `.lx-feature-hero-card` is `overflow: hidden` and parks its name
        panel just BELOW its own bottom edge; hovering slides the panel up into
        the card. The park is therefore only correct while the panel's top is at
        or past the card's bottom, and that holds at every width the donor
        designed for — measured leak (glyph pixels inside the clip) is 0px on
        all ten cards at 768, 834, 1024 and 1440.

        Below 480px the card is 123px tall instead of 205/266, while the panel's
        offset inside it is fixed in pixels, so the panel's top ends up ABOVE the
        card's bottom and its first line is cut in half by the clip. Measured
        leak at 320, 360, 375, 390, 393, 412 and 430, identical at all seven:
        11px on the two cards whose name wraps to two lines
        (「市场信号 AI 员工」) and 2px on the other eight.

        16px of margin — not a transform, which the reveal owns — puts every
        panel back below the edge. Measured after: leak 0px on all ten cards at
        all seven widths, with the card boxes unchanged at 123px, so nothing in
        the collage moves. There is no hover on a phone, so the panel's revealed
        position is unreachable there and this only ever moves the parked one. */
  .lx-scope .lx-feature-hero-card .lx-name-views-content { margin-top: 16px; }
}


/* Blocks pinned to a fixed pixel width on a phone, leaving dead screen beside
   them.
   ---------------------------------------------------------------------------
   Three instances of the same Webflow habit: a max-width typed for the
   smallest phone the designer had (320px, 370px, 250px) that no breakpoint ever
   releases. On a 320px handset they are invisible; on the 412px and 430px
   handsets most Android phones and the Pro Max iPhones actually are, they cost
   a quarter to two fifths of the screen. Measured at 320 / 360 / 375 / 390 /
   393 / 412 / 430, and at 768 / 834 / 991 / 1024 to confirm nothing above the
   gate moves. */

/* 1. index, the hero copy. `.container-bottom.add-px` is capped at 320px below
      479px and `.bottom-grid.max-w-rsp` inside it at 300px, so the headline
      list, the paragraph and the CTA all sit in a 320px column whatever the
      phone is. Measured before, the block's box against the viewport:
      0..304 at 320 (the cap is not even reached), then 0..320 at 360, 375, 390,
      393, 412 AND 430 — 110px of empty white beside it at 430, 26% of the
      screen.

      Both caps come off below 480px and the block falls back to
      `.container-bottom`'s own `width: 95%`, which is the rule the template
      already applies from 991px down. Measured after: 0..304 at 320 (identical
      — 95% of 320 is 304, so the narrowest phone is untouched to the pixel),
      0..342 at 360, 0..356 at 375, 0..371 at 390/393, 0..391 at 412, 0..409 at
      430, and the paragraph's measure goes from a fixed 294px to 328/345/362/
      379/389px. The block's height is unchanged at 806px, so the hero's sticky
      100vh panel and the 300vh scroll choreography timed against it do not
      move, and the closing wordmark below it is a different element and is not
      touched here. */
@media screen and (max-width: 479px) {
  .hero .container-bottom.add-px { max-width: none; }
  .hero .container-bottom.add-px .bottom-grid.max-w-rsp { max-width: none; }
}

/* 2 and 3. enterprise's 「(来自真实的全球贸易)」 intro and contact's
   「(我们的承诺)」 card are both `.max-w-left`, and the template DOES release
   that class on mobile — `@media (max-width: 991px) { .max-w-left { max-width:
   100% } }`. But it releases only the bare class: the two variants
   `.max-w-left.add-mr` (250px) and `.max-w-left.add-cnt` (370px) are two-class
   selectors, so they outrank the release and keep their desktop caps all the
   way down. That is the whole defect.

   Measured before:
     enterprise `.add-mr`  247px wide at 320, 360, 375, 390, 393, 412 AND 430 —
       the same 247px on every phone, inside a row that is 307..413px, so at 430
       it fills 60% of the line and 40% of the screen is empty beside it;
     contact `.add-cnt`    370px, and the card inside it (`.testimonials-card
       ._03.rl`, which the template narrows to 90% below 768px) 276 / 311 / 324 /
       333 / 333 / 333 / 333px, left-anchored, against a 307..413px row — a
       79px band of empty black down its right side at 430.

   Releasing the two variants at the same 991px breakpoint the template uses for
   their base class. Measured after:
     `.add-mr`  304 / 340 / 355 / 374 / 374 / 391 / 407px — the row it sits in,
       at every phone width; 172px at 768, 188 at 834, 226 at 991 and 234 at
       1024, i.e. IDENTICAL to before at all four, because from 768 up the block
       is a grid track narrower than its old cap and the cap never bound;
     `.add-cnt` and the card 307 / 346 / 360 / 374 / 377 / 396 / 413px, the same
       width as the contact form stacked below them, which is what made the old
       band read as a mistake; 286 / 313 / 376 / 317px at 768 / 834 / 991 / 1024,
       again identical to before. */
@media screen and (max-width: 991px) {
  .max-w-left.add-mr,
  .max-w-left.add-cnt { max-width: 100%; }
}

/* The card's own 90% belongs to the same defect: with the wrapper released it
   would still stop 41px short of the row on a 430px phone, and only on the
   right, because the block is left-anchored. 100% is what the template gives
   this card at every other width. */
@media screen and (max-width: 767px) {
  .testimonials-card._03.rl { max-width: 100%; }
}


/* Smaller mobile defects, one block each.
   ========================================================================= */

/* 1. index and enterprise: the pull-quote `.top-text.for-sst`, set at body size
      with no leading.
      --------------------------------------------------------------------
      The template steps this class 27.2px (desktop h3) -> 16px (work-title,
      <=991) -> 19.2px (h5, <=767) -> 16px (h6, <=479) and never gives it a
      line-height, so it inherits the page's DISPLAY leading of 1.1 at every
      size. At 27px that is 2.7px of air and merely tight; at 16px it is 1.6px,
      and CJK glyphs fill their em box, so the lines touch. Measured pitch on
      the homepage's dark 「企业版」 card: 17px at 360, 375, 393, 412 and 430 and
      18px at 320 and 390 — for 16px type. The card beside it on the same page
      uses `.top-text.for-tst`, which DOES declare
      `line-height: var(--line-height--paragraph-line-height)`, and runs 21px.
      That is the number this quote should have had.

      Two changes, both the template's own tokens:
        - the paragraph line-height from 991px down, i.e. everywhere the type is
          at or under 19.2px. Measured after: pitch 25px at 320-430 and 21px at
          768 and 991; 1024 and up are outside the query and unchanged at
          27.2px / 29.92px, pitch 30px.
        - the h5 step kept below 479px instead of dropping to h6. The <=479 step
          DOWN to 16px is what leaves enterprise's 「(原则)」 quote —
          「把工作交给 AI。权力留在企业。」 — at body size in a 370px-tall card,
          reading as a caption rather than as the pull-quote it is at every other
          width. 19.2px is not a new size: it is what the template itself gives
          this class in the band immediately above (480-767), so the phone now
          continues that band instead of stepping backwards.

      Checked for overflow, because the card is a fixed 370px box below 479px:
      after the change the quote's bottom still sits 155px (index, 320 — the
      worst case, four lines) to 192px above the card's bottom edge at every one
      of 320 / 360 / 375 / 390 / 393 / 412 / 430. */
@media screen and (max-width: 991px) {
  .top-text.for-sst { line-height: var(--line-height--paragraph-line-height); }
}
@media screen and (max-width: 479px) {
  .top-text.for-sst { font-size: var(--font--h5); }
}

/* 2. enterprise's 「接入方式」 table: a three-across header over stacked rows.
      --------------------------------------------------------------------
      Below 479px the template collapses each data row to a single centred
      column (`.award-wrapper { flex-flow: column; display: flex }`) but leaves
      the header a three-column grid, so the column labels name columns that no
      longer exist. Measured at 320: the labels sit at x31..73, x125..182 and
      x224..289 (the third wrapping to two lines in its 64px track, header 42px
      tall) while the first data row is a centred stack — API at x147..173,
      「直接调用与被调用」 at x92..228, 「已有系统」 at x126..194. Not one label is
      over the cell it names.

      Restoring the three columns for the data was tried first and is wrong: at
      320 the first track is 51px, and 「Activepieces」 and 「Windmill」 are wider
      than that with no break opportunity in them, so they overprint the middle
      column. The rows have to stay stacked.

      So the header stops being a header and becomes what it can honestly be on
      a phone: one centred legend line, in the same order as the three lines of
      every row below it, on the same centre line as them. Measured after, 320:
      x58..100, x116..173, x189..262 on one 21px line (the third label no longer
      wraps); 375: x85..127, x143..201, x217..290. `flex-wrap` is there so the
      legend can take a second line rather than overflow if the labels ever grow.
      Above 479px nothing changes — the rows are a real three-column grid there
      and the header still matches them. `#loop` and `#atlas` are the same
      donor table on the same page and the same site, and they collapse the same
      way, so they are named here too. */
@media screen and (max-width: 479px) {
  #table .grdi-3-columns.mk3,
  #loop .grdi-3-columns.mk3,
  #atlas .grdi-3-columns.mk3 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 16px;
    row-gap: 4px;
  }
}

/* 3. capabilities, the 「四个板块，十四个能力组」 intro. `.macro-intro` is this
      site's own wrapper (written by tools/build-site.mjs, and the only class
      here with no donor behind it), so nothing ever gave its three parts a
      rhythm: Mono's `h2` carries `margin-top: 15px` and `margin-bottom: 0`, and
      the sub-line carries no margin at all. Measured gap between the headline's
      bottom and the sub-line's top: 0px at 320, 360, 375, 390, 393, 412, 430,
      768, 1024 AND 1440 — they are touching at every width, with the headline at
      30.4px and the sub-line at 17.6px on a phone, which is where it reads worst.

      15px, so the sub-line sits below the headline exactly as far as the
      headline sits below the eyebrow — the block's own measured rhythm rather
      than a new number. Measured after: 15 / 15 at every one of those ten
      widths. */
.macro-intro p.top-text.big { margin-top: 15px; }

/* 4. capabilities, the capability-map rows: the question sitting ~10px below
      its own 「+」 toggle.
      --------------------------------------------------------------------
      `.cn-accordion-top-wrap` is `display: flex; align-items: center`, so it
      centres the title item and the plus block on each other. In the FAQ block
      that works. In the capability map it does not, and the reason is scope:
      the donor's own reset is written `.cn-faq .cn-accordion-heading`, and the
      capability map roots the same markup under `.cn-capmap`, where the reset
      cannot reach it and Webflow's `h2 { margin-top: 20px }` applies instead.

      Measured at 430: `.cn-faq` title item 26px tall with a 26px heading in it,
      `.cn-capmap` title item 46px tall with the same 26px heading pinned to its
      BOTTOM by that 20px margin — so the heading's centre falls 10px below the
      32px toggle's. Same at 1024 (36px heading in a 56px item). Measured after:
      `.cn-capmap` reports title 26 / heading 26 / row 32 / toggle 32 at 320,
      360, 375, 390, 393, 412 and 430, and 36 / 36 / 40 / 40 at 768 and 1024 —
      identical to the FAQ block at every width. Only the margin changes;
      the row's expand animation, its rounded ground and the plus's own
      rotation are untouched. */
.cn-capmap .cn-accordion-heading { margin-top: 0; }


/* The contact page's two columns, and the thousand pixels between them.
   ---------------------------------------------------------------------------
   `.contact-1-grid` is three columns: the quote card (「我们的承诺」 + its
   portrait film) takes one, the form takes two. Measured on the built page,
   the form card is 1335px tall against the quote card's 204px — 1131px of
   difference at 1440 and 1280, 1113 at 1024, 1114 at 992 — and the grid is
   `align-items: start`, so the card sits at the top and the rest of its column
   is empty. That is what reads as a hole down the left of the page.

   Three ways to close it, and why this one:
     - stretch the card to the form's height: the portrait is a fixed-ratio
       film, so it would have to crop or letterbox. It is the page's one piece
       of human imagery; distorting it to fill space is the worst trade.
     - centre the card in its column: the hole moves, it does not close, and
       the promise is then below the fold when the form is at the top.
     - let it follow. The card says 「不必第一天就改变一切。告诉我们最影响效率或
       增长的那一条流程，我们从那里开始。」 — which is the one thing worth having
       on screen WHILE someone fills in eight fields. Sticky keeps it there and
       leaves the card's own design untouched.

   `top` is 108px: the navigation bar measures 68px and 40px is the page's own
   gutter above the grid, so the card settles exactly where it started rather
   than jumping under the bar. Only from 992px up, where the grid is actually
   side by side — below that the template stacks the two into one column and
   there is no hole to close. */
@media screen and (min-width: 992px) {
  .stargo-contact-page .contact-1-grid .max-w-left.add-cnt {
    position: sticky;
    top: 108px;
  }
}

/* V6 homepage headings (2026-09-16): break at the punctuation, not inside a word.
   ---------------------------------------------------------------------------
   The new headings are sentences with a comma in the middle —
   「288 个数字岗位，不只服务外贸。」 and the four problem-card titles such as
   「询盘来了，还要重新整理」. `text-wrap: balance`
   (above) evens the two lines by length, and in CJK any character is a break
   opportunity, so at 390px it cut 「岗位」 in half, and at 320px 「还要」.
   The Scalora headings are not listed: GSAP splits them into one inline-block
   per character, and a break between inline-blocks is always allowed, so
   keep-all cannot reach them. Their copy is written in two equal halves
   instead, which is where balance puts the break.
   `word-break: keep-all` leaves only the space and the comma as break
   points, so balance lands on the comma. `overflow-wrap: anywhere` is the
   fallback for a half that does not fit the line at all (320px): it may then
   break inside it rather than run out of the box. Chinese pages only; the
   English headings wrap on spaces already. */
html[lang^="zh"] .section.with-minus h2.h2,
html[lang^="zh"] .work-card .work-title.b {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* The hero's readable introduction is now the product definition, five
   lines at 1440 that left 「握。」 alone on the last one. `pretty` reworks
   only the tail. */
html[lang^="zh"] .hero .max-w-left.add-tp p.top-text.big.nm {
  text-wrap: pretty;
}

/* ===== V6 A: capability showcases (#story-1…#story-4, #story-6, foundations) =====
   Insertion point for this area's rules. Keep additions between this marker
   and the next one so parallel edits merge cleanly. */
/* V6-A-START */

/* capabilities.html — the four business areas (V5 P02).
   Each card's glass panel now ends with the area's one-line description
   (`p.macro-desc`, written by tools/build-site.mjs on this page only). It is
   set like the group count above it — same white, same fluid size, regular
   weight — at reading leading, and held to a measure so a long English line
   wraps inside the panel rather than stretching it past the photograph's four
   fifths. `pretty` keeps a lone word off the last line. The host's `p` rule
   (`opacity: .7`, `-.5px` tracking) is put back to the panel's own values. */
.wrok-wrapper .work-card .work-title-main .macro-desc {
  margin: 0;
  max-width: 30em;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: var(--font-weight--400, 400);
  line-height: 1.45;
  letter-spacing: normal;
  opacity: 1;
  text-wrap: pretty;
}
@media screen and (max-width: 991px) {
  .wrok-wrapper .work-card .work-title-main .macro-desc { font-size: clamp(0.95rem, 1.9vw, 1.15rem); }
}

/* The map heading above those cards, 「四个板块，十四类能力」 / "Four areas.
   Fourteen capability groups". Chinese headings are already balanced site-wide
   (`h2.h2`); the English one left "groups" alone on its second line at 1440,
   so this one heading is balanced in both languages. */
.macro-intro .h2 { text-wrap: balance; }

/* V6-A-END */




/* ===== V6 B: creative topics (#story-5) =====
   Insertion point for this area's rules. Keep additions between this marker
   and the next one so parallel edits merge cleanly. */
/* V6-B-START */

/* V6-B-END */




/* ===== V6 C: capability catalogue detail (#g01–#g14, #atlas) =====
   Insertion point for this area's rules. Keep additions between this marker
   and the next one so parallel edits merge cleanly. */
/* V6-C-START */
/* The catalogue's groups open onto their detail first (V6 §5.8): the group's
   one-line summary, then per topic an optional sub-heading, a lede, the
   detail items, a value line, the business outputs and the availability note,
   and last the register entries under their own small heading. Markup:
   tools/build-site.mjs capabilityShowcase().

   Everything sits in cinery's answer block (36rem wide), which IX2 opens to
   its natural height, so nothing here sets a height. The donor gives every
   `.cn-accordion-answer-text` a 2rem top padding — right for one answer,
   far too loose for a list — so inside the detail that padding is taken off
   and the rhythm is set with margins instead. The register entries below keep
   the donor's spacing exactly as before. Type sizes are the block's own 16px
   (15px for the table and the availability note, as `.cn-note` already had);
   nothing is shrunk to make the longer answers fit.

   Every block of the answer carries `.cn-accordion-answer-text`, the
   sub-headings and the role table included. Cinery's "Accordion - Hover In"
   slides each element with that class 1.5rem to the right while the row is
   hovered (a tap does the same on a phone); a heading or table without it
   stayed where it was, and the column came apart under the pointer. The
   class brings the donor's type and padding with it, so the rules for those
   blocks below are written one class stronger than the donor's
   `.cn-capmap .cn-accordion-answer-text` and than the `answer + answer`
   margin above. */

/* Landing on #atlas or #gNN. The page has no fixed bar at the top (the nav
   scrolls away with the hero, the pill sits at the bottom), so this is only
   breathing room: the heading lands 24px below the edge instead of on it.
   js/stargo-catalogue.js reads the same value when it re-aligns a row. */
.cn-capmap[id],
.cn-capmap .cn-accordion-content-item[id] { scroll-margin-top: 24px; }

/* The band's count: the figure and its meaning each move to the next line
   whole when they fit there, so a narrow band breaks between them and not
   inside a word (a piece wider than the band still wraps inside itself). */
.cn-capmap .cn-band-count > span { display: inline-block; }

/* Each kind of line below sets its own top margin; at equal specificity these
   come after the generic `answer + answer { margin-top: 12px }` above, so
   they win without a reset. */
.cn-capmap .cn-cat-detail .cn-accordion-answer-text { padding-top: 0; padding-left: 0; }
/* The donor insets answer text 10px (none below 480px). The detail takes
   that inset as a block, so every line of it starts on the same edge as the
   register entries below (and as the register's heading, which keeps the
   donor's own inset). */
.cn-capmap .cn-cat-detail { padding-left: 10px; }
@media (max-width: 479px) {
  .cn-capmap .cn-cat-detail { padding-left: 0; }
}

/* the group's summary: the first line of the answer, where the donor's own
   paragraph used to start */
.cn-capmap .cn-cat-detail > .cn-accordion-answer-text.cn-lede {
  padding-top: 2rem; margin-bottom: 0; color: #e4e4e4; font-size: 18px; line-height: 1.5;
}

/* sub-headings: one per topic in g01, g08, g09, g10 and g13, and the
   register's own heading */
.cn-capmap .cn-accordion-answer-text.cn-cat-sub {
  margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: normal; color: #fff;
  text-wrap: balance;
}
/* the register's heading draws its rule from the same edge as the detail's
   (the donor's 10px inset as a margin, not a padding inside the rule) */
.cn-capmap .cn-accordion-answer-text.cn-cat-index { margin-top: 36px; margin-left: 10px; padding-left: 0; }
@media (max-width: 479px) {
  .cn-capmap .cn-accordion-answer-text.cn-cat-index { margin-left: 0; }
}
/* The register under it is now an index, one short line per entry. The
   donor's 2rem above every answer paragraph (plus the 12px between them)
   left 44px between one-line entries; 4px + 12px keeps them apart at the
   rhythm of the detail's own list. */
.cn-capmap .cn-cat-index ~ .cn-accordion-answer-text { padding-top: 4px; }
.cn-capmap .cn-cat-index + .cn-accordion-answer-text { padding-top: 14px; }

.cn-capmap .cn-cat-detail .cn-cat-lede { margin-top: 14px; color: #cfcfcf; }
.cn-capmap .cn-cat-detail .cn-cat-sub + .cn-cat-lede { margin-top: 10px; }

/* the detail items: title on its own line, text under it, a hairline down
   the left so a run of six reads as one list */
.cn-capmap .cn-cat-points {
  display: flex; flex-flow: column; gap: 14px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.cn-capmap .cn-cat-points > li.cn-accordion-answer-text {
  margin: 0; padding: 0 0 0 14px; border-left: 1px solid rgba(255, 255, 255, .18);
}
.cn-capmap .cn-cat-points > li > strong { display: block; margin-bottom: 2px; }

.cn-capmap .cn-cat-detail .cn-cat-value { margin-top: 16px; color: #cfcfcf; }
.cn-capmap .cn-cat-detail .cn-out { margin-top: 14px; }
/* The availability note is part of the answer, not small print: the donor's
   #6f6f6f on the row's dark ground was too faint to read at 15px. */
.cn-capmap .cn-cat-detail .cn-note { margin-top: 8px; color: #c4c4c4; font-size: 15px; }
/* a part with no outputs line: the note follows the list at the list's own gap */
.cn-capmap .cn-cat-detail .cn-cat-points + .cn-note { margin-top: 16px; }
.cn-capmap .cn-cat-detail .cn-out strong,
.cn-capmap .cn-cat-detail .cn-note strong { margin-right: .25em; }

/* g10's ten role groups: two columns that fit a phone as they are */
.cn-capmap .cn-accordion-answer-text.cn-cat-table {
  width: 100%; margin: 16px 0 0; border-collapse: collapse;
  font-size: 15px; line-height: 1.4; color: var(--neutral-color--secondary-neutral);
}
/* the caption moves with its table, so it does not carry the class itself */
.cn-capmap .cn-cat-table caption {
  caption-side: top; padding: 0 0 8px; text-align: left;
  color: #cfcfcf; font-size: 16px; line-height: 1.5;
}
.cn-capmap .cn-cat-table th,
.cn-capmap .cn-cat-table td {
  padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  text-align: left; font-weight: 400;
}
.cn-capmap .cn-cat-table thead th { color: #8d8d8d; }
.cn-capmap .cn-cat-table td,
.cn-capmap .cn-cat-table thead th:last-child {
  padding-left: 16px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cn-capmap .cn-cat-table td { color: #fff; }
.cn-capmap .cn-cat-table tfoot th,
.cn-capmap .cn-cat-table tfoot td {
  border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 0; color: #fff; font-weight: 500;
}

@media (max-width: 767px) {
  .cn-capmap .cn-cat-detail > .cn-accordion-answer-text.cn-lede { font-size: 17px; }
  .cn-capmap .cn-accordion-answer-text.cn-cat-sub { font-size: 17px; }
}
/* V6-C-END */




/* ===== V6 D: workforce page =====
   Insertion point for this area's rules. Keep additions between this marker
   and the next one so parallel edits merge cleanly. */
/* V6-D-START */

/* workforce.html — the V6 content (tools/copy.mjs LX_FEATURE_WORKFORCE and
   WORKFORCE_ROLE_GROUPS; built by tools/build-site.mjs PAGES['workforce.html']).
   Every selector below is scoped to a class the workforce builder adds, or to
   .lx-feature-title-holder, which only the feature template (workforce.html,
   both languages) carries — so no other Lifelogx page is touched. */

/* 1. The pink panel's heading, 「有岗位，有团队，有工作台」, and the role-group
      heading beside the list. Neither is split into characters (no IX on
      them), so `keep-all` works here: it leaves the commas — and the <wbr>s
      the builder puts between the role-group heading's phrases — as the only
      break points, and `text-wrap: balance` (the zh sweep above) chooses
      among those. Without it balance halves the string wherever the middle
      falls: 「有岗位，有团」/「队，有工作台」. Every phrase is shorter than the
      narrowest line it gets — four characters in the panel heading's 192px
      box at 768 (4.8 characters of 40px type), eight in the role-group
      heading's 288px at 320 (nine characters of 32px type). Chinese only;
      English breaks at its spaces.
      The five-step line under the role-group intro gets the same treatment:
      its steps are joined by "&nbsp;→ ", so with keep-all it breaks only after
      an arrow. Without it, 320, 390 and 1024 read 「…→ 分」/「配任务 →…」. The
      longest step with its arrow is nine characters of 14px type (126px). */
html[lang^="zh"] .lx-scope .lx-v6-panel-title,
html[lang^="zh"] .lx-scope .lx-v6-roster-title,
html[lang^="zh"] .lx-scope .lx-v6-roster-flow {
  word-break: keep-all;
}
/* The English role-group heading is two sentences, each an inline block
   (the builder's spans), so the first line break falls between them; inside
   the second the template's own balance (.lx-header-container-left) evens the
   lines: "One task-focused" / "AI workforce." at 320, 390, 768 and 1440.
   As one string it read "Ten role groups. One task-" / "focused AI
   workforce." at 768. */
.lx-scope .lx-v6-roster-chunk { display: inline-block; text-wrap: balance; }
/* Between the template's 991px fold and its 1280px container the heading
   column (1fr of 1fr 1.5fr) is narrower than "One task-focused" at 48px —
   384px against about 390px at 1024 — and the sentence broke 「One task-」 /
   「focused」 / 「AI workforce.」. 1fr 1.25fr gives it 427px there; the list
   keeps 533px, and every row still shows its group and count on one line. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .lx-scope .lx-v6-roster .lx-careers_sticky-grid { grid-template-columns: 1fr 1.25fr; }
}

/* English display lines the zh sweep does not reach (it is scoped to
   html[lang^="zh"]; the Chinese page already balances both). Unbalanced, the
   hero's "Build the team your task needs." left "needs." alone at 768, and
   the team heading left "result." alone at 768 and 1024. */
.lx-scope .lx-feature-title-holder .lx-heading-style-h1,
.lx-scope .lx-v6-team-title {
  text-wrap: balance;
}

/* The display line behind the team cards, 「一个目标，一个团队。」. It IS
   split per character (IX), so keep-all cannot reach it; it is written as two
   five-character halves instead, and balance puts the break between them.
   Unbalanced, the box's six characters a line (800px of 124.8px type at 1440,
   358px of 58.5px at 390) gave 「一个目标，一」/「个团队。」. The template does
   not balance `.lx-big-text-on-gradient` because its own words never needed
   it; the class is the workforce builder's. */
html[lang^="zh"] .lx-scope .lx-v6-team-display {
  text-wrap: balance;
}

/* 2. The ten role groups: the template's careers list (lifelogx.lx.css,
      .lx-careers_*) with rows that are not links. What is added is only what
      the list did not need as a job board: a count column on the right, a
      marked total row, and room for the intro and the note. The count keeps
      the row's own 1.5rem; the unit under it uses the list's grey sub-line.
      At 991px and below the template folds the grid to one column; the
      heading is no longer sticky there because it would sit on top of the
      rows it introduces. */
.lx-scope .lx-v6-roster .lx-careers_01-item {
  gap: 1rem;
  cursor: default;
}
.lx-scope .lx-v6-roster .lx-careers-item-name { min-width: 0; }
.lx-scope .lx-v6-roster .lx-careers-item-name > div:first-child { overflow-wrap: anywhere; }
.lx-scope .lx-v6-roster-count {
  flex: none;
  align-items: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lx-scope .lx-v6-roster-count .lx-careers-text { white-space: nowrap; }
.lx-scope .lx-v6-roster-total {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--_semantics---primary);
  color: var(--_semantics---primary);
}
.lx-scope .lx-v6-roster-total .lx-careers-text { color: inherit; }
.lx-scope .lx-v6-roster-title { margin-top: 0; margin-bottom: 0; }
.lx-scope .lx-v6-roster-intro { margin: 1.5rem 0 0; font-size: 1.125rem; }
.lx-scope .lx-v6-roster-flow { margin: 1rem 0 0; font-size: .875rem; }
.lx-scope .lx-v6-roster-note { margin: 1.5rem 0 0; }
.lx-scope .lx-v6-roster .lx-header-container-left { margin-bottom: 0; }
@media screen and (max-width: 991px) {
  .lx-scope .lx-v6-roster .lx-sticky-content { position: static; }
  .lx-scope .lx-v6-roster .lx-careers_sticky-grid { row-gap: 2rem; }
}
@media screen and (max-width: 479px) {
  .lx-scope .lx-v6-roster .lx-careers_01-item { padding: .875rem 1rem; }
  .lx-scope .lx-v6-roster-intro { font-size: 1rem; }
}

/* 3. The team scenario's cards: the label above each heading, and the second
      card's messages. The label is the template's own .lx-subtext (the
      feature grid's small caps), given the card's text colour at a lower
      opacity so it reads as a caption, not as a second heading.

      The messages replace a picture of two chat bubbles (Group 34.png, 740 x
      430) whose words were painted in. The arrangement copies that picture:
      the blob is 37% of the width and sits on the left, the bubbles start 1/3
      of the way across and overlap the blob, white, black type, large radius.
      It is laid out in normal flow, not stacked absolutely, because below
      480px the template gives these cards `aspect-ratio: auto` — the card
      grows with its content there, and a longer message (the English ones
      wrap to two lines) has to push the card, not spill out of it. At 768
      and up the card is a fixed 400px square; the three messages take about
      the height the picture did. Measured with transforms off, inside the
      second card: the picture was 384x222 at 768-1024; the messages are
      384x214 in English and 384x149 in Chinese, all three inside the card
      at 320, 390, 768, 1024 and 1440, and the card never scrolls. Below 480
      the card grows with them: 416px tall at 320 and 350 at 390 in English,
      281 and 246 in Chinese, where the picture card was 224 and 255. */
.lx-scope .lx-v6-scene-label {
  margin-bottom: .5rem;
  opacity: .72;
}
.lx-scope .lx-v6-chat {
  display: flex;
  align-items: center;
  padding: .25rem 0 1rem 1.25rem;
}
.lx-scope .lx-v6-chat-blob {
  flex: none;
  width: 37%;
  height: auto;
}
.lx-scope .lx-v6-chat-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
  margin-left: -13%;
}
.lx-scope .lx-v6-chat-line {
  margin: 0;
  padding: .5rem .875rem;
  border-radius: 1.1rem;
  background-color: #fff;
  color: #000;
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.lx-scope .lx-v6-chat-line:first-child { border-bottom-left-radius: .3rem; }
@media screen and (max-width: 479px) {
  .lx-scope .lx-v6-chat { padding-left: 1rem; }
  .lx-scope .lx-v6-chat-lines { gap: .375rem; }
  .lx-scope .lx-v6-chat-line { padding: .375rem .625rem; font-size: .8125rem; border-radius: .9rem; }
}

/* 4. The small role card inside the desktop collage (.lx-organized-mind-card,
      marked .lx-v6-collage-card by the builder). Same mechanism as the hero
      cards' fix further up this file ("the scattered photo cards under the
      CTA"): the card clips, and its name panel is parked just below the bottom
      edge by a fixed 80px transform. Below 480px the card is 119px tall and
      the panel's content overflows it, so a two-line name — 「报告 AI 员工」
      wraps at the card's 77px — lifts the panel's first line 6.3px into view:
      the top half of 「报告 AI 员」 showed along the card's bottom at 390
      (measured; the template's one-line 「审计台账」 leaked 1.9px, below the
      glyphs' ink). The same 16px margin puts it back under the edge. There is
      no hover on a phone, so the revealed position is never shown there. */
@media screen and (max-width: 479px) {
  .lx-scope .lx-v6-collage-card .lx-name-views-content { margin-top: 16px; }
}

/* V6-D-END */




/* ===== V6 E: intelligence page =====
   Insertion point for this area's rules. Keep additions between this marker
   and the next one so parallel edits merge cleanly. */
/* V6-E-START */

/* intelligence.html — the plain-explanations section (#lx-context), V6 §7.
   ---------------------------------------------------------------------------
   One added section (tools/build-site.mjs lxContextSection) between the
   "no writing" band and the 288-roles section: P03's headline, a lede, six
   short explanations and the availability note. Everything that is not
   already a Lifelogx class is here, and every value is one the template uses
   elsewhere: the grid is .lx-story-grid's (1rem gap, 4rem top margin, one
   column below 768), the card outline is .lx-story-grid-item.lx-_3's (1px
   #262627, 23px radius), the pink is --_semantics---primary as on
   .lx-heading-style-h1.lx-pink. Three columns from 992px, where the Chinese
   item titles (at most seven characters of 2rem type) still fit the 234px
   inside a card; two between 768 and 991; one below. No animation: nothing
   here is bound by the Lifelogx interactions, so it is readable without
   JavaScript and never waits for a scroll trigger. */
#lx-context { scroll-margin-top: 100px; }
.lx-scope .lx-context-head {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
.lx-scope .lx-context-title { margin: 0; }
.lx-scope .lx-context-title > span { display: block; }
.lx-scope .lx-context-title > .lx-context-pink { color: var(--_semantics---primary); }
.lx-scope .lx-context-lede {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  color: var(--_primitives---primary--text-grey, #989898);
}
.lx-scope .lx-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 4rem;
}
.lx-scope .lx-context-item {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid #262627;
  border-radius: 23px;
}
.lx-scope .lx-context-item h3,
.lx-scope .lx-context-item p,
.lx-scope .lx-context-note p { margin: 0; }
.lx-scope .lx-context-flow { color: var(--_semantics---primary); }
/* Line breaking, both languages. The English titles broke 「One customer,
   every」/「system」 and 「Tasks that carry」/「on」; balance evens them (the
   Chinese h4s already get it from the lx sweep). `pretty` keeps a lone
   character or word off the last line of the paragraphs, e.g. 「…请人判」/
   「断。」 at 390. In Chinese the flow line breaks only at its spaces, so a
   step such as 沉淀经验 is never split; the build puts a no-break space before
   each arrow. */
.lx-scope .lx-context-title > span,
.lx-scope .lx-context-item h3 { text-wrap: balance; }
.lx-scope .lx-context-lede,
.lx-scope .lx-context-item p,
.lx-scope .lx-context-note p { text-wrap: pretty; }
html[lang^="zh"] .lx-scope .lx-context-flow { word-break: keep-all; overflow-wrap: anywhere; }
.lx-scope .lx-context-note {
  display: flex;
  flex-flow: column;
  gap: .75rem;
  max-width: 46rem;
  margin: 3rem auto 0;
}
@media (max-width: 991px) {
  .lx-scope .lx-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .lx-scope .lx-context-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .lx-scope .lx-context-item { padding: 1.5rem; }
  .lx-scope .lx-context-grid { margin-top: 3rem; }
}

/* intelligence.html, Chinese — where the new headings may break.
   ---------------------------------------------------------------------------
   The same idiom as the homepage block above (V6 homepage headings):
   `word-break: keep-all` leaves only spaces, punctuation and <wbr> as break
   points, and `text-wrap: balance` (the lx sweep further up) then chooses the
   most even of those. `overflow-wrap: anywhere` is the fallback for a run that
   cannot fit a line on its own; each run was written to fit at 320px, so it
   should never fire.
   - The 288-roles headings, 「288 个岗位，」 and 「分工协作，把事做完。」
     (2.7rem on a phone, 6.7 em of room at 320): without keep-all the second
     one balanced to 「分工协作，把」/「事做完。」. Scoped by `.lx-team-section`,
     which the build puts on this section only: workforce.html's article strip
     is a `.lx-flex-text-center` heading pair as well.
   - The four gradient headings. 「安排 AI 参与的步骤」 is 8.5 em against
     8.2 em at 320 and must take two lines there; keep-all puts the break at a
     space, 「安排 AI」/「参与的步骤」, instead of inside 参与.
   - The closing card's two lines, 「把有用的方法留下，」 and
     「把无效的改动撤回。」: nine characters fit the 9 em box from 1024 up and
     wrap below it. The copy carries a <wbr> after 方法 / 改动, so the break
     reads 「把有用的方法」/「留下，」 rather than 「把有用的方」/「法留下，」. */
html[lang^="zh"] .lx-scope .lx-team-section .lx-flex-text-center .lx-heading-style-h1,
html[lang^="zh"] .lx-scope .lx-gradient-section-text .lx-heading-style-h1,
html[lang^="zh"] .lx-scope .lx-cta-wrapper .lx-cta-text {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* Two older rules further up now serve the new copy unchanged:
   `.lx-cta_wrapper .lx-big-text` keep-all breaks 「新机会、期限，不靠人记」
   only at its punctuation (three lines at 320 and 390, two at 768 and 1024,
   one from 1440), and `.lx-hero-desc` keep-all + balance gives
   「AI 理解公司，」/「并主动推进工作」 at every width.

   intelligence.html, English — the same two headline slots, balanced. The
   English page had no balance on them, and the new copy left a word alone:
   「Leads and deadlines, not left to」/「memory.」 at 1920, 「Assign useful AI」/
   「work」 and 「Improve from real」/「outcomes」 at 320-390; the same goes for
   the 288-roles pair (「Divide the work. Finish it」/「together.」 at 1024) and
   the closing card (「Withdraw ineffective」/「changes.」 from 1024). None of
   these elements is split into per-word spans, and they only fade or move as
   a whole, so balance changes where the lines break and nothing else. All
   four selectors match on this page only. */
html[lang="en"] .lx-scope .lx-cta_wrapper .lx-big-text,
html[lang="en"] .lx-scope .lx-gradient-section-text .lx-heading-style-h1,
html[lang="en"] .lx-scope .lx-team-section .lx-flex-text-center .lx-heading-style-h1,
html[lang="en"] .lx-scope .lx-cta-wrapper .lx-cta-text {
  text-wrap: balance;
}

/* V6-E-END */




/* ===== V6 F: enterprise page =====
   Insertion point for this area's rules. Keep additions between this marker
   and the next one so parallel edits merge cleanly. */
/* V6-F-START */

/* 1. The left column of the owner-cockpit band now reaches the quote row.
      ------------------------------------------------------------------
      `.about-grid` (enterprise only) is two columns from 768px up, and the
      space between its last stat and the image + quote row below was never
      set by anyone: the right column's three pictures are 30 + 42 + 27rem
      (1624px with gaps) and the text column was shorter, so the row simply
      ended 179px (1440), 181px (1024) or 305px (768) under the last stat.
      The column now carries the owner-cockpit text, the six delivery steps
      (V6 §8.4) where Mono had four short lines, and stat sentences that say
      what each figure counts, so it is the taller column: without this rule
      the last stat sits directly on the quote card. Measured row height with
      it (the pictures stay 1624): 1757 (zh) / 2189 (en) at 1440, 1753 / 2251
      at 1024, 1898 / 2680 at 768 — the English text is the longer, so at 768
      the pictures end about 1050px above the last stat.
      Below 768 the template already separates the two with
      `.testi-grid._01 { margin-top: 100px }`; the same 100px goes under the
      text column here. While the pictures are the taller column it changes
      nothing; when the text is taller the row grows by what it needs and the
      pictures keep their own heights. */
@media screen and (min-width: 768px) {
  .about-grid > .about-max-w { padding-bottom: 100px; }
}

/* 2. The pull-quote is M15's value line, three to four lines long, and the
      enterprise card is the only `.testi-grid._01` on the site. `pretty`
      reworks only the tail so a closing 「“已经完成”。」 is not left as a
      short last line. */
html[lang^="zh"] .testi-grid._01 .top-text.for-sst { text-wrap: pretty; }

/* 3. The connections table (#table): its middle and last columns are now
      both sentences — what can connect, and what has to be agreed first — so
      the room is shared between them instead of going mostly to the middle
      (#loop and #atlas keep the shared .8 / 1.7 / 1 split above). Same
      specificity as that rule, later in the file. */
/*    The template's rows have no gap between columns, which was fine for one
      word a cell; with sentences a long first-column word met the next
      column's text with nothing between (measured at 768: 「conversations」
      ended 8px inside the middle column, at 480 4px short of it). 12px keeps
      them apart; header and rows get the same gap, so the labels stay over
      their columns. Below 479px the header is a flex legend (its own
      column-gap: 16px above) and the rows are stacks, so the gap changes
      nothing there. */
#table .award-wrapper, #table .grdi-3-columns.mk3 {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr) minmax(0, 1.35fr);
  column-gap: 12px;
}
/*    Below 479px each row is a centred stack (see "2. enterprise's table"
      above) and these cells now run to two lines on a phone — measured at
      390: 「邮箱、即时沟通、B2B 平台询盘与 CRM 客」/「户记录」 — so a left-aligned
      second line hung off a centred first one. Centred like the stack and
      the legend above it, and balanced: without it 「户记录」, 「城业务」 and
      「行范围」 were left short under a full first line at 390. */
@media screen and (max-width: 479px) {
  #table .award-text { text-align: center; justify-content: center; text-wrap: balance; }
}

/* 4. The four hero panels' pictures follow their new subjects (V6 §8.1, §10).
      `.image-about._01…_04` exist only on the enterprise page; their pictures
      are set in "4. Template stock photography" above and are overridden here
      with the same specificity, later in the file. Before, panel 1 carried
      os-cockpit — the picture the owner-cockpit band now shows two screens
      further down — and panel 2 carried os-agent-center (tools on parallel
      lanes) beside 「结果可以核对」. Now: 决定 → layered permission
      boundaries (brand-family-04), 核对 → records set out one after another
      (os-loading), 连接 → separate lanes joining one block (brand-family-03);
      经营 keeps the dispatch floor. The panels print white text straight on
      the picture, so only dark pictures qualify: os-login, brand-loop and
      os-desktop fit the subjects as well but are pale, and the first try with
      them left the panel text unreadable at 1440 (they are used as framed
      pictures further down instead). All are landscape 1586×992 like the
      pictures they replace, so the cover crop is unchanged. */
.image-about._01 { background-image: url("../assets/stargo-editorial/brand-family-04.webp"); }
.image-about._02 { background-image: url("../assets/stargo-editorial/os-loading.webp"); }
.image-about._03 { background-image: url("../assets/stargo-editorial/brand-family-03.webp"); }

/* 5. The six delivery steps (V6 §8.4) as a numbered list. Each step is a
      name and what it involves, and at every width from 320 to 1920 it takes
      two or more lines in this paragraph (measured, Chinese: at most 10
      characters a line at 768, 14 to 15 at 390, 1024, 1440 and 1920; English
      steps run to three lines at 1440 and five at 768). Written as plain
      lines, a step's second line began under its number, so the numbers no
      longer marked where a step starts. tools/build-site.mjs writes each step
      as .ent-step (number | words); the number gets a fixed track, the words
      wrap in theirs, and a small gap separates the steps. Type size, weight
      and line height are the paragraph's own. `pretty` keeps a step from
      ending on a single character (「清。」 at 320, 「则。」 at 768). */
.approach-grid .ent-step {
  display: grid;
  grid-template-columns: 1.55em minmax(0, 1fr);
  column-gap: .3em;
}
.approach-grid .ent-step + .ent-step { margin-top: .3em; }
.approach-grid .ent-step-t { text-wrap: pretty; }

/* 6. The English headline, 「Delegate the work. Keep the authority.」, is two
      sentences, and unbalanced it broke inside the second one — 「…Keep the」 /
      「authority.」 at 1440 and 1920, 「…Keep」 / 「the authority.」 at 768 (the
      Chinese pages already balance `h1.inner-title`, sweep above). Balanced,
      it breaks between the sentences. `:has(.about-grid)` keeps this to the
      enterprise page: the other English pages' titles are other areas'. */
html[lang^="en"] body:has(.about-grid) h1.inner-title { text-wrap: balance; }

/* V6-F-END */




/* ===== V6 G: about, contact, blog and pricing notes =====
   Insertion point for this area's rules. Keep additions between this marker
   and the next one so parallel edits merge cleanly. */
/* V6-G-START */

/* Contact card: V5 P07's note that a demo request is not a booked meeting
   (tools/blocks/cn-contact.mjs). It is small print and sits directly above the
   consent line tools/chrome.mjs appends, so it takes that line's size and
   leading (`.stargo-form-consent`, above) and only its top margin: the consent
   line's own 16px top margin is the gap between the two. */
.cn-contact .stargo-form-before {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

/* Contact card: the colour of the three paragraphs this site puts inside
   cinery's dark card — the status line js/stargo-forms.js writes errors and
   the e-mail fallback into, the demo-request note above, and the consent line
   tools/chrome.mjs appends to every form. All three computed rgb(0,0,0) here
   (this page's own paragraph colour, meant for Mono's white forms), which on
   the card's #232324 measures 1.34:1: the privacy sentence and any error were
   there but could not be read. Measured before V6 as well; the note added for
   V6 would have inherited the same. The status line takes cinery's white, as
   the field labels do; the two lines of small print take cinery's secondary
   neutral (#bbb), its colour for secondary text. Scoped to `.cn-contact`, so
   every other form keeps its own. */
.cn-contact p.stargo-form-note {
  color: var(--primary-color--white, #fff);
}
.cn-contact p.stargo-form-before,
.cn-contact p.stargo-form-consent {
  color: var(--neutral-color--secondary-neutral, #bbb);
}

/* Contact card: the message box's placeholder (V5 P07's example). cinery's
   sheet paints placeholders #222 (`.cn-contact .cn-form-input::placeholder`),
   its dark-on-light value; this field is rgb(57,57,58), where #222 measures
   1.38:1 and cannot be read — the same mismatch tools/blocks/cn-contact.css
   repairs for the select. cinery's own secondary neutral (#bbb) is its colour
   for secondary text and measures 6.0:1 here. One more class than the donor
   rule, so it wins wherever the two sheets load. */
.cn-contact .cn-form-input.cn-is-text-area::placeholder {
  color: var(--neutral-color--secondary-neutral, #bbb);
  opacity: 1;
}

/* Blog index hero: V5 P09's sentence under the headline
   (tools/build-site.mjs, PAGES['blog.html']). It wears the Lifelogx about
   hero's own description pair, whose gap there comes from that hero's flex
   column; `.lx-blog-title-big` has none, so the space between heading and
   sentence is set here: 1.5rem, which keeps the sentence visibly part of the
   heading's group while the template's own 4rem (2.5rem ≤767) margin under
   `.lx-blog-title-big` still separates the group from the cards. The
   template's `.lx-text-size-regular` supplies size, colour and face
   untouched. */
.lx-scope .lx-blog-title-big .stargo-blog-intro {
  margin-top: 1.5rem;
}

/* Blog index hero, English: "Understand AI through real business work." does
   not fit the 40rem measure on two lines at 3.2–4rem, and unbalanced it left
   "work." alone on a third line at 768–1920. Balance evens the three lines;
   the Chinese page already balances every `.lx-heading-style-h1` (the sweep
   above), so this only brings the English heading of this one page in line.
   No size changes. */
.lx-scope .lx-blog-hero-title {
  text-wrap: balance;
}

/* Contact page heading, English: "Which workflow should work better first?"
   left "first?" alone on a third line at 320, 390 and 1024. Same fix, scoped
   to this one heading by the class tools/build-site.mjs gives it
   (`h1.inner-title` is shared with other pages). The Chinese heading is
   already balanced by the sweep above. No size changes. */
h1.inner-title.stargo-contact-title {
  text-wrap: balance;
}

/* V6-G-END */




/* ===== V6 review fixes (lead, 2026-09-17) =====
   Found by the post-merge browser review of the whole V6 candidate. */

/* 1. The homepage workspace film's centre line is now a sentence
      (「同一个工作空间，连接日常经营。」) where it used to be a short product
      name. Mono positions `.cta-sm-title` absolutely with no offsets, so the
      longer line started at the left edge of the screen. It now spans the
      section with the page's 16px gutter and is centred and balanced; the
      Chinese copy is written in two near-equal halves so balance breaks at the
      comma (GSAP splits it per character, so keep-all cannot help). */
.video-section .cta-sm-title._06 {
  left: 16px;
  right: 16px;
  text-align: center;
  text-wrap: balance;
}

/* 2. Enterprise owner-cockpit band: the text column (cockpit, six delivery
      steps, three stats with what they count) is now taller than Mono's three
      fixed-height pictures, which left a long empty run under the last one —
      about 1,500px in English at 768. From 768 up the three frames grow to the
      column's height instead (the pictures are object-fit: cover, so they are
      cropped, not distorted, and the blur-in reveal is unchanged). While the
      pictures are the taller column this changes nothing. */
@media screen and (min-width: 768px) {
  .about-grid > .about-images .work-content-wrapper { flex: 1 1 auto; }
}

/* 3. Chinese orphans. Most new V6 paragraphs ended with one character and its
      full stop on a line of their own at some width (「…复/核。」, 「…完/善。」).
      `text-wrap: pretty` reworks only the last lines of a paragraph. Chinese
      pages only, and never on the pricing page, whose layout this change must
      leave exactly as it was. */
html[lang^="zh"] body:not(:has(.rk-price-tiers)) :is(p, li, .qx-body, .lx-text-size-regular, .lx-text-size-medium, .rk-rt-insights-text, .cn-accordion-answer-text, .cn-text-size-large) {
  text-wrap: pretty;
}

/* 4. The footer statement (every page): the Chinese line breaks after 「企业的」
      with a forced break in the copy (the heading is split per character, so
      no line-breaking property keeps 「网页」 together). English lines are
      balanced so a single word does not end the statement. */
html[lang^="en"] .footer-part-1 h2.h2 { text-wrap: balance; }


/* ===== V7 round (2026-09-17): owner decisions, blog, pre-existing fixes =====
   One block per work area so parallel edits merge cleanly. Keep each area's
   rules between its own markers. */

/* V7-COPY-START (lead: status copy, pricing, contact) */
/* V7-COPY-END */


/* V7-BLOG-START (blog articles, FAQ blocks) */
/* The blog (V7, 2026-09-17). Article bodies are printed by tools/blog.mjs
   renderBody() into `.lx-text-rich-text.stargo-post`: the answer paragraph,
   the 「要点速览」 takeaways (.sgp-takeaways), h3 sections, the charts
   (figure.sgc, built from data by the chart* helpers), the value/condition
   lines of the long guide (.sgp-value / .sgp-cond), the call to action
   (.sgp-cta) and the FAQ (.sgp-faq). Everything here is scoped to that block,
   except the blog index hero and the Chinese heading punctuation at the end.
   Palette and type are lifelogx's own: the pink primary, its deep tertiary,
   the dark border and greys, "42 Dotsans" for headings and Inter for text. */
.lx-scope .stargo-post {
  --sg-accent: var(--_semantics---primary, #e393bd);
  --sg-hot: var(--_primitives---primary--secondary, #f938a1);
  --sg-deep: var(--_primitives---primary--tertiary, #500b38);
  --sg-line: var(--_primitives---primary--border-dark, #292829);
  --sg-card: #121113;
  --sg-card-2: #1a191c;
  --sg-panel: #0b0a0c;
  --sg-muted: var(--_primitives---primary--text-grey, #989898);
  --sg-soft: #c9c7cb;
  --sg-ink: #16060f;
  --sg-head: var(--_ui-styles---fonts--heading, "42 Dotsans", Arial, sans-serif);
}
.lx-scope .stargo-post h3 { text-wrap: balance; }
.lx-scope .stargo-post h3[id] { scroll-margin-top: 6rem; }
@media (max-width: 479px) {
  .lx-scope .stargo-post h3 { font-size: 1.7rem; line-height: 1.25; }
}

/* Key takeaways, right under the answer paragraph. */
.lx-scope .stargo-post .sgp-takeaways {
  margin: 1.75rem 0 2.25rem;
  padding: 1.25rem 1.4rem 1.1rem;
  border: 1px solid rgba(227, 147, 189, .38);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(80, 11, 56, .62), rgba(18, 17, 19, .96) 70%);
}
.lx-scope .stargo-post .sgp-takeaways-title {
  margin: 0 0 .8rem;
  font-family: var(--sg-head);
  font-size: .95rem;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-accent);
}
.lx-scope .stargo-post .sgp-takeaways ul { list-style: none; margin: 0; padding: 0; overflow: visible; }
.lx-scope .stargo-post .sgp-takeaways li {
  position: relative;
  margin: 0 0 .55rem;
  padding-left: 1.55rem;
  line-height: 1.6;
}
.lx-scope .stargo-post .sgp-takeaways li:last-child { margin-bottom: 0; }
.lx-scope .stargo-post .sgp-takeaways li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .52em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--sg-accent);
  box-shadow: 0 0 0 4px rgba(227, 147, 189, .16);
}

/* The long guide's contents list. */
.lx-scope .stargo-post .sgp-toc {
  margin: 0 0 2.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--sg-line);
  border-radius: 1rem;
  background: var(--sg-panel);
}
.lx-scope .stargo-post .sgp-toc-title { margin: 0 0 .75rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-muted); }
.lx-scope .stargo-post .sgp-toc ol { list-style: none; margin: 0; padding: 0; overflow: visible; counter-reset: sgtoc; columns: 2 17rem; column-gap: 2rem; }
.lx-scope .stargo-post .sgp-toc li {
  counter-increment: sgtoc;
  position: relative;
  break-inside: avoid;
  margin: 0 0 .5rem;
  padding-left: 2rem;
  font-size: .92rem;
  line-height: 1.45;
}
.lx-scope .stargo-post .sgp-toc li::before {
  content: counter(sgtoc, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--sg-accent);
  font-variant-numeric: tabular-nums;
}
.lx-scope .stargo-post .sgp-toc a { color: inherit; text-decoration: none; }
.lx-scope .stargo-post .sgp-toc a:hover,
.lx-scope .stargo-post .sgp-toc a:focus-visible { color: var(--sg-accent); text-decoration: underline; }

/* Value and availability lines under each guide section. */
.lx-scope .stargo-post :is(.sgp-value, .sgp-cond) {
  margin: 0 0 .65rem;
  padding: .1rem 0 .1rem .9rem;
  border-left: 2px solid var(--sg-line);
  font-size: .95rem;
  line-height: 1.65;
}
.lx-scope .stargo-post .sgp-value { border-left-color: var(--sg-accent); }
.lx-scope .stargo-post .sgp-cond { color: var(--sg-soft); }
.lx-scope .stargo-post .sgp-value strong { color: var(--sg-accent); font-weight: 600; }
.lx-scope .stargo-post .sgp-cond strong { color: #fffffe; font-weight: 600; }

/* The closing call to action. */
.lx-scope .stargo-post .sgp-cta {
  margin: 2.5rem 0 0;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(227, 147, 189, .3);
  border-radius: 1rem;
  background: var(--sg-card);
  font-weight: 500;
  line-height: 1.6;
}
.lx-scope .stargo-post .sgp-cta a { font-weight: 600; white-space: nowrap; }

/* FAQ at the end of every article (the same words as its FAQPage data). */
.lx-scope .stargo-post .sgp-faq { margin-top: 3.5rem; padding-top: .5rem; border-top: 1px solid var(--sg-line); }
.lx-scope .stargo-post .sgp-faq h3 { margin-top: 2rem; }
.lx-scope .stargo-post .sgp-faq-item { padding: 1.1rem 0 1.15rem; border-bottom: 1px solid var(--sg-line); }
.lx-scope .stargo-post .sgp-faq-item h4 {
  margin: 0 0 .5rem;
  font-family: var(--_ui-styles---fonts--text, Inter, sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: normal;
}
.lx-scope .stargo-post .sgp-faq-item p { margin: 0; color: var(--sg-soft); }

/* ---- charts --------------------------------------------------------------
   figure.sgc is a size container: every chart lays itself out for the width
   it actually has (the article column is 1fr beside the related list above
   991px and full width below), stacked by default and in rows from 480–600px
   of chart width. Webflow's rich-text sheet shrinks figures to 60% and hides
   the text of any div inside a figure (`.w-richtext figure div`); both are
   undone here. Text is real text; the bars and frames are decoration. */
.lx-scope .stargo-post figure.sgc {
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 2rem 0 2.25rem;
  padding: 1.25rem;
  border: 1px solid var(--sg-line);
  border-radius: 1.25rem;
  background: radial-gradient(120% 80% at 0% 0%, rgba(80, 11, 56, .42), transparent 62%), var(--sg-panel);
  color: #fffffe;
  font-family: var(--_ui-styles---fonts--text, Inter, sans-serif);
  font-size: 1rem;
}
.lx-scope .stargo-post figure.sgc div { color: inherit; font-size: inherit; }
.lx-scope .stargo-post .sgc :is(ul, ol) { list-style: none; margin: 0; padding: 0; overflow: visible; }
.lx-scope .stargo-post .sgc :is(li, p) { margin: 0; opacity: 1; letter-spacing: normal; line-height: 1.45; }
.lx-scope .stargo-post .sgc strong { font-weight: 600; }
.lx-scope .stargo-post .sgc-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem; margin: 0 0 1.15rem; text-align: left; }
.lx-scope .stargo-post .sgc-no {
  flex: none;
  padding: .15rem .6rem;
  border: 1px solid rgba(227, 147, 189, .45);
  border-radius: 999px;
  color: var(--sg-accent);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lx-scope .stargo-post .sgc-title { flex: 1 1 14rem; min-width: 0; font-family: var(--sg-head); font-size: 1.2rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc .sgc-label { margin: 1rem 0 .5rem; color: var(--sg-muted); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.lx-scope .stargo-post .sgc .sgc-note { margin-top: 1.1rem; color: var(--sg-muted); font-size: .82rem; line-height: 1.6; }
.lx-scope .stargo-post .sgc-idx { color: var(--sg-accent); font-size: .72rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* Steps: a card per step, joined by an arrow badge in the gap. */
.lx-scope .stargo-post .sgc-flow { --sgc-gap: 1rem; display: grid; gap: var(--sgc-gap); }
.lx-scope .stargo-post .sgc-step {
  position: relative;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  column-gap: .6rem;
  row-gap: .15rem;
  align-content: start;
  padding: .8rem .9rem;
  border: 1px solid var(--sg-line);
  border-radius: .85rem;
  background: var(--sg-card);
}
.lx-scope .stargo-post .sgc-step > .sgc-idx { grid-row: 1 / span 3; padding-top: .22rem; }
.lx-scope .stargo-post .sgc-step-title { font-size: 1rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc-tag { color: var(--sg-accent); font-size: .8rem; }
.lx-scope .stargo-post .sgc-step-text { color: var(--sg-soft); font-size: .85rem; line-height: 1.5; }
.lx-scope .stargo-post :is(.sgc-flow > li, .sgc-lanes > *, .sgc-team > *) { position: relative; }
.lx-scope .stargo-post :is(.sgc-flow > li + li, .sgc-lanes > * + *, .sgc-team > * + *)::before {
  content: "↓";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--sgc-gap, 1rem) / -2 - 1px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(227, 147, 189, .5);
  border-radius: 50%;
  background: var(--sg-panel);
  color: var(--sg-accent);
  font-size: .72rem;
  line-height: 1;
}
.lx-scope .stargo-post .sgc-back { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; color: var(--sg-soft); font-size: .88rem; }
.lx-scope .stargo-post .sgc-back-icon { flex: none; color: var(--sg-accent); font-size: 1.15rem; line-height: 1; }
.lx-scope .stargo-post .sgc .sgc-motto { margin-top: 1.4rem; text-align: center; color: var(--sg-accent); font-family: var(--sg-head); font-size: 1.1rem; line-height: 1.4; }

/* Rows once the chart is wide enough: the arrow moves into the column gap. */
@container (min-width: 480px) {
  .lx-scope .stargo-post :is(.sgc-flow-3, .sgc-flow-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-scope .stargo-post :is(.sgc-flow-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-scope .stargo-post :is(.sgc-flow-3, .sgc-flow-4, .sgc-flow-6) .sgc-step { grid-template-columns: 1fr; }
  .lx-scope .stargo-post :is(.sgc-flow-3, .sgc-flow-4, .sgc-flow-6) .sgc-step > .sgc-idx { grid-row: auto; padding: 0 0 .2rem; }
  .lx-scope .stargo-post :is(.sgc-flow-3, .sgc-flow-4, .sgc-flow-6) > li + li::before { content: "→"; left: calc(var(--sgc-gap) / -2 - 1px); top: 50%; }
  .lx-scope .stargo-post .sgc-flow-4 > li:nth-child(2n + 1)::before,
  .lx-scope .stargo-post .sgc-flow-6 > li:nth-child(3n + 1)::before { content: none; }
}
@container (min-width: 600px) {
  .lx-scope .stargo-post .sgc-flow-5 { --sgc-gap: .9rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lx-scope .stargo-post .sgc-flow-5 .sgc-step { grid-template-columns: 1fr; padding: .85rem .75rem; }
  .lx-scope .stargo-post .sgc-flow-5 .sgc-step > .sgc-idx { grid-row: auto; padding: 0 0 .25rem; }
  .lx-scope .stargo-post .sgc-flow-5 > li + li::before { content: "→"; left: calc(var(--sgc-gap) / -2 - 1px); top: 50%; }
  /* The five start steps carry a sentence each; in five columns of ~110px
     that ran to four lines and split 「影/响」 and 「客/户」. They are rows
     instead: number, step, sentence, joined by a down arrow under the number. */
  .lx-scope .stargo-post .sgc-flow-5.sgc-numbered { --sgc-gap: .6rem; grid-template-columns: minmax(0, 1fr); }
  .lx-scope .stargo-post .sgc-flow-5.sgc-numbered .sgc-step { grid-template-columns: 3rem minmax(8rem, 13rem) minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding: .75rem 1rem; }
  .lx-scope .stargo-post .sgc-numbered .sgc-step > .sgc-idx { grid-row: auto; padding: 0; font-family: var(--sg-head); font-size: 1.6rem; line-height: 1; letter-spacing: 0; }
  .lx-scope .stargo-post .sgc-flow-5.sgc-numbered > li + li::before { content: "↓"; left: 1.95rem; top: calc(var(--sgc-gap) / -2 - 1px); }
  html[lang^="zh"] .lx-scope .stargo-post .sgc-flow-5.sgc-numbered .sgc-step { grid-template-columns: 3rem 8.5rem minmax(0, 1fr); }
}

/* Chips. */
.lx-scope .stargo-post .sgc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lx-scope .stargo-post .sgc-chips li {
  padding: .3rem .7rem;
  border: 1px solid var(--sg-line);
  border-radius: 999px;
  background: var(--sg-card-2);
  font-size: .82rem;
  line-height: 1.35;
}
.lx-scope .stargo-post .sgc-chips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.lx-scope .stargo-post .sgc-chips-grid li { border-radius: .6rem; }
.lx-scope .stargo-post .sgc-chips-solid li { border-color: transparent; background: var(--sg-accent); color: var(--sg-ink); font-weight: 600; }
.lx-scope .stargo-post .sgc .sgc-traits { margin-top: 1.1rem; }
.lx-scope .stargo-post .sgc-traits li { color: var(--sg-soft); }

/* (2) Growth OS → Sales Desk. */
.lx-scope .stargo-post .sgc-lanes { --sgc-gap: 1.1rem; display: grid; gap: var(--sgc-gap); }
.lx-scope .stargo-post :is(.sgc-lane, .sgc-duo-card, .sgc-team > div) {
  padding: 1rem;
  border: 1px solid var(--sg-line);
  border-radius: 1rem;
  background: rgba(18, 17, 19, .92);
}
.lx-scope .stargo-post .sgc .sgc-lane-title { margin: 0 0 .1rem; font-family: var(--sg-head); font-size: 1.05rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc-lane > .sgc-label:first-of-type { margin-top: .6rem; }
.lx-scope .stargo-post .sgc .sgc-profile { margin: .75rem 0 1rem; color: var(--sg-accent); font-size: .85rem; }
.lx-scope .stargo-post .sgc-lane .sgc-flow { margin-top: 1rem; }
.lx-scope .stargo-post .sgc-handoff {
  padding: 1rem;
  border: 1px solid rgba(227, 147, 189, .5);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--sg-deep), #22091a);
}
.lx-scope .stargo-post .sgc-handoff-title strong { font-size: 1.05rem; }
.lx-scope .stargo-post .sgc .sgc-handoff-text { margin-top: .25rem; color: #f2d7e6; font-size: .86rem; line-height: 1.5; }
.lx-scope .stargo-post .sgc-handoff .sgc-label { color: #f2d7e6; }
.lx-scope .stargo-post .sgc-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 0; }
.lx-scope .stargo-post .sgc-chain li {
  position: relative;
  padding: .32rem .7rem;
  border-radius: .5rem;
  background: var(--sg-card-2);
  font-size: .86rem;
  font-weight: 600;
}
.lx-scope .stargo-post .sgc-chain li + li { margin-left: 1.35rem; }
.lx-scope .stargo-post .sgc-chain li + li::before {
  content: "→";
  position: absolute;
  left: -1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sg-accent);
  font-weight: 400;
}

/* (3) The role directory as bars. */
.lx-scope .stargo-post .sgc-bars { display: grid; gap: .7rem; }
.lx-scope .stargo-post .sgc-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name value" "track track";
  align-items: baseline;
  column-gap: .75rem;
  row-gap: .3rem;
}
.lx-scope .stargo-post .sgc-bar-name { grid-area: name; font-size: .9rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc-bar-value { grid-area: value; color: var(--sg-muted); font-size: .8rem; white-space: nowrap; }
.lx-scope .stargo-post .sgc-bar-value strong { color: #fffffe; font-size: 1rem; font-variant-numeric: tabular-nums; }
.lx-scope .stargo-post .sgc-bar-track { grid-area: track; display: block; height: .55rem; overflow: hidden; border-radius: 999px; background: #1f1e21; }
.lx-scope .stargo-post .sgc-bar-fill { display: block; width: var(--sgc-share, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sg-deep), var(--sg-hot) 55%, var(--sg-accent)); }
.lx-scope .stargo-post .sgc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--sg-line);
  font-weight: 600;
}
.lx-scope .stargo-post .sgc-total-value { color: var(--sg-muted); font-size: .85rem; }
.lx-scope .stargo-post .sgc-total-value strong { color: var(--sg-accent); font-family: var(--sg-head); font-size: 1.8rem; line-height: 1; font-weight: 500; }
@container (min-width: 520px) {
  .lx-scope .stargo-post .sgc-bar { grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 4.75rem; grid-template-areas: "name track value"; align-items: center; }
  .lx-scope .stargo-post .sgc-bar-track { height: .8rem; }
  .lx-scope .stargo-post .sgc-bar-value { text-align: right; }
}

/* (4) AI teamwork. */
.lx-scope .stargo-post .sgc-team { --sgc-gap: 1.1rem; display: grid; gap: var(--sgc-gap); }
.lx-scope .stargo-post .sgc .sgc-quote { font-family: var(--sg-head); font-size: 1.25rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc-team-brief .sgc-label { margin-top: 0; }
.lx-scope .stargo-post .sgc .sgc-aside { margin-top: .5rem; color: var(--sg-muted); font-size: .75rem; }
.lx-scope .stargo-post .sgc .sgc-hub {
  display: grid;
  justify-items: center;
  gap: .15rem;
  max-width: 17rem;
  margin: 0 auto 1rem;
  padding: .9rem 1.2rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, var(--sg-hot), var(--sg-deep) 72%);
  box-shadow: 0 0 0 6px rgba(227, 147, 189, .12);
  text-align: center;
}
.lx-scope .stargo-post .sgc-hub strong { font-family: var(--sg-head); font-size: 1.15rem; font-weight: 500; }
.lx-scope .stargo-post .sgc-hub span { color: #f7e1ec; font-size: .78rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.lx-scope .stargo-post .sgc-role { display: grid; align-content: start; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--sg-line); border-radius: .75rem; background: var(--sg-card-2); }
.lx-scope .stargo-post .sgc-role-name { font-size: .92rem; line-height: 1.3; }
.lx-scope .stargo-post .sgc-role-task { color: var(--sg-soft); font-size: .8rem; line-height: 1.4; }
.lx-scope .stargo-post .sgc-role-lead { border-color: rgba(227, 147, 189, .55); background: #251220; }
.lx-scope .stargo-post .sgc-msgs { display: grid; gap: .45rem; }
.lx-scope .stargo-post .sgc-msg {
  display: grid;
  gap: .1rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(227, 147, 189, .28);
  border-radius: .8rem .8rem .8rem .2rem;
  background: rgba(80, 11, 56, .35);
}
.lx-scope .stargo-post .sgc-msg-who { color: var(--sg-accent); font-size: .72rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc-msg-text { font-size: .88rem; }
.lx-scope .stargo-post .sgc-team-out .sgc-label { margin-top: 0; }
.lx-scope .stargo-post .sgc-outlist li { padding: .45rem 0; border-bottom: 1px solid var(--sg-line); font-size: .92rem; font-weight: 500; }
.lx-scope .stargo-post .sgc .sgc-review {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .9rem;
  padding: .65rem .8rem;
  border-radius: .75rem;
  background: var(--sg-accent);
  color: var(--sg-ink);
  font-weight: 700;
}
/* From 640px of chart width: the brief is a band across the top, the team
   and the combined output sit side by side under it. (Three columns — brief,
   team, output — left the brief about 100px wide at 704–750px, the article
   column's width at 768 and 1440: 「开拓一个新/的目标市/场」, and "Human
   review" on two lines.) */
@container (min-width: 640px) {
  .lx-scope .stargo-post .sgc-team { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .lx-scope .stargo-post .sgc-team-brief { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
  .lx-scope .stargo-post .sgc .sgc-team-brief :is(.sgc-label, .sgc-aside) { margin: 0; }
  .lx-scope .stargo-post .sgc-team-brief .sgc-quote { flex: 1 1 auto; }
  .lx-scope .stargo-post .sgc-team > .sgc-team-out::before { content: "→"; left: calc(var(--sgc-gap) / -2 - 1px); top: 3rem; }
  .lx-scope .stargo-post .sgc-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-scope .stargo-post .sgc-role-lead { grid-column: 1 / -1; }
}

/* (5) One-click video. */
.lx-scope .stargo-post .sgc .sgc-brief {
  display: grid;
  gap: .3rem;
  margin-bottom: 1.1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--sg-line);
  border-radius: 1rem;
  background: var(--sg-card);
}
.lx-scope .stargo-post .sgc-brief .sgc-label { margin: 0; }
.lx-scope .stargo-post .sgc-brief .sgc-quote { font-size: 1.1rem; }
.lx-scope .stargo-post .sgc-pills { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 0; }
.lx-scope .stargo-post .sgc-pill {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .38rem .75rem;
  border: 1px solid var(--sg-line);
  border-radius: 999px;
  background: var(--sg-card-2);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.lx-scope .stargo-post .sgc-pill + .sgc-pill { margin-left: 1.3rem; }
.lx-scope .stargo-post .sgc-pill + .sgc-pill::before { content: "→"; position: absolute; left: -1.02rem; top: 50%; transform: translateY(-50%); color: var(--sg-accent); font-weight: 400; }
.lx-scope .stargo-post .sgc-pill:last-child { border-color: transparent; background: var(--sg-accent); color: var(--sg-ink); }
.lx-scope .stargo-post .sgc-pill:last-child .sgc-idx { color: var(--sg-deep); }
.lx-scope .stargo-post .sgc-video-grid { display: grid; gap: 1rem; margin-top: .4rem; }
.lx-scope .stargo-post .sgc-beats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.lx-scope .stargo-post .sgc-frame-beat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
  min-height: 5.25rem;
  padding: .6rem .7rem;
  border: 1px solid var(--sg-line);
  border-radius: .7rem;
  background: linear-gradient(165deg, #2b0f21, var(--sg-card) 70%);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.3;
}
.lx-scope .stargo-post .sgc-formats { display: flex; align-items: flex-end; justify-content: space-around; gap: .75rem; padding: .25rem 0; }
.lx-scope .stargo-post .sgc-format { display: grid; justify-items: center; gap: .3rem; text-align: center; font-size: .82rem; }
.lx-scope .stargo-post .sgc-shape { display: block; border: 2px solid var(--sg-accent); border-radius: .35rem; background: rgba(227, 147, 189, .12); }
.lx-scope .stargo-post .sgc-shape-portrait { width: 2.3rem; height: 4.1rem; }
.lx-scope .stargo-post .sgc-shape-landscape { width: 5.4rem; height: 3.05rem; }
.lx-scope .stargo-post .sgc-shape-square { width: 3.3rem; height: 3.3rem; }
.lx-scope .stargo-post .sgc-format-ratio { color: var(--sg-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
@container (min-width: 560px) {
  .lx-scope .stargo-post .sgc-video-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .lx-scope .stargo-post .sgc-beats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lx-scope .stargo-post .sgc-frame-beat { min-height: 6.5rem; }
}

/* (6) Proactive loop: examples under the steps. */
.lx-scope .stargo-post .sgc-examples { display: grid; gap: .5rem; }
.lx-scope .stargo-post .sgc-example { display: grid; gap: .2rem; padding: .7rem .85rem; border-left: 2px solid var(--sg-accent); border-radius: 0 .7rem .7rem 0; background: var(--sg-card); }
.lx-scope .stargo-post .sgc-example strong { font-size: .92rem; }
.lx-scope .stargo-post .sgc-example span { color: var(--sg-soft); font-size: .84rem; line-height: 1.5; }
@container (min-width: 560px) {
  .lx-scope .stargo-post .sgc-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* (8) Owner control trio. */
.lx-scope .stargo-post .sgc-trio { display: grid; gap: .6rem; }
.lx-scope .stargo-post .sgc-trio-item { display: grid; align-content: start; gap: .3rem; padding: 1rem; border: 1px solid var(--sg-line); border-radius: .9rem; background: var(--sg-card); }
.lx-scope .stargo-post .sgc-trio-title { font-family: var(--sg-head); font-size: 1.45rem; font-weight: 500; line-height: 1.2; }
@container (min-width: 520px) {
  .lx-scope .stargo-post .sgc-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* (9) Availability. */
.lx-scope .stargo-post .sgc-statuses { display: grid; gap: .6rem; }
.lx-scope .stargo-post .sgc-status { display: grid; align-content: start; gap: .55rem; padding: .9rem 1rem; border: 1px solid var(--sg-line); border-radius: .9rem; background: var(--sg-card); }
.lx-scope .stargo-post .sgc-status-title { display: flex; align-items: center; gap: .5rem; font-size: .98rem; line-height: 1.35; }
.lx-scope .stargo-post .sgc-status-title::before { content: ""; flex: none; width: .65rem; height: .65rem; border: 2px solid var(--sg-muted); border-radius: 50%; }
.lx-scope .stargo-post .sgc-status-now { border-color: rgba(227, 147, 189, .6); background: linear-gradient(135deg, rgba(80, 11, 56, .7), var(--sg-card) 75%); }
.lx-scope .stargo-post .sgc-status-now .sgc-status-title::before { border-color: var(--sg-accent); background: var(--sg-accent); }
.lx-scope .stargo-post .sgc-status-base .sgc-status-title::before { border-color: var(--sg-accent); background: linear-gradient(90deg, var(--sg-accent) 50%, transparent 50%); }
.lx-scope .stargo-post .sgc-status-next { border-style: dashed; }
.lx-scope .stargo-post .sgc-status ul { display: grid; gap: .35rem; }
.lx-scope .stargo-post .sgc-status li li,
.lx-scope .stargo-post .sgc-status ul > li { position: relative; padding-left: .95rem; color: var(--sg-soft); font-size: .85rem; line-height: 1.5; }
.lx-scope .stargo-post .sgc-status ul > li::before { content: ""; position: absolute; left: 0; top: .62em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--sg-muted); }
@container (min-width: 560px) {
  .lx-scope .stargo-post .sgc-statuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* (10) Knowledge and the relationship map. */
.lx-scope .stargo-post .sgc-duo { display: grid; gap: .75rem; }
.lx-scope .stargo-post .sgc-duo-card { display: grid; align-content: start; gap: .8rem; }
.lx-scope .stargo-post .sgc-checks { display: grid; gap: .3rem; }
.lx-scope .stargo-post .sgc-checks li { position: relative; padding-left: 1.3rem; color: var(--sg-soft); font-size: .86rem; }
.lx-scope .stargo-post .sgc-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--sg-accent); }
.lx-scope .stargo-post .sgc-questions { display: grid; gap: .35rem; }
.lx-scope .stargo-post .sgc-questions li { padding: .45rem .7rem; border-radius: .6rem .6rem .6rem .15rem; background: rgba(80, 11, 56, .4); font-size: .86rem; }
.lx-scope .stargo-post .sgc-chain-core li { background: var(--sg-deep); }
@container (min-width: 560px) {
  .lx-scope .stargo-post .sgc-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .lx-scope .stargo-post figure.sgc { margin-left: 0; margin-right: 0; padding: 1rem .85rem; border-radius: 1rem; }
  .lx-scope .stargo-post :is(.sgp-takeaways, .sgp-toc) { padding: 1rem; }
  .lx-scope .stargo-post .sgp-toc ol { columns: 1; }
  .lx-scope .stargo-post .sgc-title { font-size: 1.08rem; }
  .lx-scope .stargo-post .sgp-cta a { white-space: normal; }
}

/* Blog index hero (V5 P09).
   English: at 320 the heading ran to four lines with 「work.」 alone. Up to
   about 345px wide the 2.7rem heading cannot fit "Understand AI" or
   "business work." on a line, so it now scales with the viewport there
   (12.5vw = 40px at 320) and balances into three lines; from 346px it is the
   template's 2.7rem again. */
@media (max-width: 479px) {
  html[lang="en"] .lx-scope .lx-blog-hero-title { font-size: min(2.7rem, 12.5vw); }
}
/* Chinese intro: only ever break at its punctuation and at the <wbr>s the
   copy carries (tools/blog.mjs BLOG_UI.intro), so 「数字员工」 stays whole. */
html[lang^="zh"] .lx-scope .stargo-blog-intro .lx-text-size-regular { word-break: keep-all; overflow-wrap: anywhere; }

/* Chinese article titles in lists — the blog index and workforce cards
   (.lx-blog-title), the related list beside an article, and the homepage
   cards (.blog-txt). Unbroken Chinese wraps between any two characters, which
   split 「图文详/解」, 「组/队」 and 「操作/系统」 and left 「营」, 「管」 or 「PI」
   alone on a last line. The titles are written in phrases separated by
   spaces, 「：」 and 「、」, so keep-all breaks only there and balance evens
   the lines; overflow-wrap keeps a phrase wider than its card from
   overflowing. Supersedes the `text-wrap: pretty` set on .lx-blog-title in
   the V6 sweep above, which fixed two of the old titles only. */
html[lang^="zh"] .lx-scope :is(.lx-blog-title, .lx-related-item > .lx-text-size-regular),
html[lang^="zh"] .blog-grid .blog-txt {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* The date line under an article title broke 「团/队」 at 320; it breaks at
   its spaces and middle dots only. */
html[lang^="zh"] .lx-scope .lx-post-meta { word-break: keep-all; overflow-wrap: anywhere; }
/* The link at its end stays whole: at 390 the English line split it into
   "View" / "All Articles". */
.lx-scope .lx-post-meta a { white-space: nowrap; }

/* The Chinese article heading is printed in phrases (tools/blog.mjs
   titleHtml). The title animation splits it into one box per character and
   then into lines by where those boxes land, so `white-space` alone does not
   hold a phrase together; an inline-block phrase is laid out as one unit, and
   the lines are cut between phrases only. */
.lx-scope .lx-blog-title-holder .sgp-nobr { display: inline-block; white-space: nowrap; }

/* Chinese blog headings: full-width punctuation.
   The heading face, 42dot Sans, is a Korean font. It carries its own ，。：？
   glyphs, drawn in the middle of the em box as Korean typography does, so
   「真实业务，」 read as if a space stood before the comma, and every 「：」 and
   「？」 in an article heading did the same. It has no `halt` feature, so
   `font-feature-settings: "halt"` and `text-spacing-trim` (which relies on it)
   cannot help. A unicode-range face sends the CJK punctuation blocks alone to
   a Simplified Chinese system font — comma and stop sit at the bottom left, as
   Chinese readers expect — and leaves every other character to 42dot Sans.
   Where no listed font is installed the face is skipped and nothing changes. */
@font-face {
  font-family: "Stargo CJK Punct";
  src: local("PingFang SC"), local("PingFangSC-Regular"), local("Microsoft YaHei"), local("MicrosoftYaHei"),
    local("Noto Sans CJK SC"), local("NotoSansCJKsc-Regular"), local("Noto Sans SC"), local("Source Han Sans SC"), local("SourceHanSansSC-Regular");
  unicode-range: U+3000-303F, U+FF01-FF60;
  font-display: swap;
}
html[lang^="zh"] .lx-scope :is(.lx-blog-hero-title, .lx-blog-title, .lx-blog-title-holder),
html[lang^="zh"] .lx-scope .stargo-post :is(h3, .sgc-title, .sgc-quote, .sgc-lane-title, .sgc-hub strong, .sgc-trio-title, .sgc-motto, .sgp-takeaways-title) {
  font-family: "Stargo CJK Punct", var(--_ui-styles---fonts--heading, "42 Dotsans"), Arial, sans-serif;
}
/* With the comma and the stop now at the left of their em box, their empty
   right half still counted when the centred hero lines were measured, pulling
   「真实业务，」 and 「看懂每一步。」 half a character to the left. SplitText
   (js/stargo-splittext-cjk.js) keeps punctuation in the word before it, and
   the build puts the one <br> right after the comma, so the comma is the last
   letter of the word before <br> and the stop the last letter of the heading. */
html[lang^="zh"] .lx-scope .lx-blog-hero-title :is(.gsap_split_word:has(+ br), .gsap_split_word:last-child) > .gsap_split_letter:last-child {
  margin-right: -.5em;
}

/* Headings inside an article break between phrases (editor, V7).
   Chinese: section headings, FAQ questions, chart titles, the two quoted
   briefs, the motto and the customer-profile line broke inside words at
   320–390 (「连/接」, 「浏览/器」, 「经/营」, 「英/文」, 「留在/企业」) and left
   「验」, 「能」, 「别？」, 「吗？」 alone on a last line. keep-all breaks them only
   at spaces, at 「，、：；？！。」 and at the <wbr>s the copy marks with 「|」
   (tools/blog.mjs inline(), whose check keeps every phrase narrower than the
   narrowest line); balance evens the lines. Product names never split
   (.sgp-nw). English: the FAQ questions and chart titles are balanced, like
   the section headings above. */
.lx-scope .stargo-post .sgp-nw { white-space: nowrap; }
html[lang^="zh"] .lx-scope .stargo-post :is(h3, .sgp-faq-item h4, .sgc-title, .sgc-quote, .sgc-motto, .sgc-profile) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.lx-scope .stargo-post :is(.sgp-faq-item h4, .sgc-title) { text-wrap: balance; }

/* English article titles: the heading, the cards (blog index, "More from the
   blog") and the related list left "work" or "PI" alone on a last line at
   320–390. Balanced, as the Chinese ones already are. */
html[lang^="en"] .lx-scope :is(.lx-blog-title-holder, .lx-blog-title, .lx-related-item > .lx-text-size-regular) {
  text-wrap: balance;
}

/* ---- V7-BLOG r2 (review of 2026-09-17) -------------------------------- */
/* The guide's contents list repeats the section headings, so it breaks like
   them. Chinese: only at spaces, 「，、：；？！。」 and the 「|」 marks of the
   headings (tools/blog.mjs inline()); it split 「视/频」, 「一/切」 and
   「接得/住」 at 320–768. Both languages: balanced, which left no single
   "proactively?" or "do?" on a second line. */
.lx-scope .stargo-post .sgp-toc li { text-wrap: balance; }
html[lang^="zh"] .lx-scope .stargo-post .sgp-toc li { word-break: keep-all; overflow-wrap: anywhere; }

/* Chinese chart text — step titles and descriptions, the scenario examples,
   the availability items, the hand-off line, the lane titles — and the
   closing call to action broke inside words (「交/期」, 「翻/译」, 「并/行处理」,
   「物/流」, 「关键动/作」, 「把工/作」). They break only at spaces, at
   「，、：；？！。」 and at the <wbr>s tools/blog.mjs writes: a 「|」 mark in a
   phrase longer than the narrowest card (checked there), and the word
   boundaries of the call to action. Descriptions keep `pretty`, titles are
   balanced (below). */
html[lang^="zh"] .lx-scope .stargo-post :is(.sgc-step-title, .sgc-step-text, .sgc-example span, .sgc-status li, .sgc-handoff-text, .sgc-lane-title, .sgp-cta) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* Both languages: the descriptions and the call to action end on more than
   one word ("signs / off", "the authorized / scope", "Request a / demo."). */
.lx-scope .stargo-post :is(.sgc-step-text, .sgc-example span, .sgc-status li, .sgc-handoff-text, .sgp-cta) { text-wrap: pretty; }
/* English card lines are short (two or three lines): balanced, as `pretty`
   still left "Extract requirements; / organize attachments and / drawings". */
html[lang^="en"] .lx-scope .stargo-post :is(.sgc-step-text, .sgc-example span, .sgc-status li, .sgc-handoff-text) { text-wrap: balance; }
/* The link is short in both languages («预约企业演示», "Request a demo") and
   never splits, at any width ("Request a / demo." and 「预约企业演/示」 at 320). */
@media (max-width: 479px) {
  .lx-scope .stargo-post .sgp-cta a { white-space: nowrap; }
}

/* Card titles in the charts are balanced in both languages, like the chart
   titles: "Connected and validated one by / one", "Assign roles and /
   approvals", "Customer development & / marketing" left one word alone. */
.lx-scope .stargo-post :is(.sgc-step-title, .sgc-status-title, .sgc-lane-title, .sgc-bar-name, .sgc-frame-beat) { text-wrap: balance; }

/* Arrow chains. They wrapped with the last box alone on a row, the arrow
   starting that row: 「报价 → PI → 订单 → 售后 / → 复购」 (390), "Customer →
   Opportunity → Quote / → Order" (1440), the video steps 3 | 3 | 1 (390) and
   5 | 2 (768, 1440). The rows are now set by the width the chart has (the
   figure is the size container), per language, since the boxes are wider in
   English; the limits below leave 15–35px to spare over the measured widths.
   A row never starts with an arrow.

   The video steps are a grid of 2, 3, 4 or 7 columns. Each step's arrow sits
   centred in the gap before it; the list clips at its own edges, so the arrow
   of a step that starts a row (it would sit left of the first column) is not
   drawn. The last step fills what is left of its row (2 | 2 | 2 | 1 → the last
   step across both columns; 4 | 3 → the last across two). */
.lx-scope .stargo-post .sgc .sgc-pills {
  display: grid;
  grid-template-columns: repeat(var(--sgc-pc, 2), auto);
  gap: .55rem var(--sgc-pg, 1.1rem);
  overflow: clip;
}
.lx-scope .stargo-post .sgc .sgc-pill { justify-content: center; padding: .38rem .65rem; }
.lx-scope .stargo-post .sgc-pill + .sgc-pill { margin-left: 0; }
.lx-scope .stargo-post .sgc-pill + .sgc-pill::before { left: calc(var(--sgc-pg, 1.1rem) / -2 - 1px); transform: translate(-50%, -50%); }
.lx-scope .stargo-post .sgc-pill:last-child { grid-column: span var(--sgc-last, 2); }
/* Needed: Chinese 275 / 373 / 647px for 3 / 4 / 7 columns, English 240 /
   357 / 487px for 2 / 3 / 4 (seven English steps need 794px, more than an
   article column has). */
@container (min-width: 290px) { html[lang^="zh"] .lx-scope .stargo-post .sgc-pills { --sgc-pc: 3; --sgc-last: 3; } }
@container (min-width: 375px) { html[lang^="en"] .lx-scope .stargo-post .sgc-pills { --sgc-pc: 3; --sgc-last: 3; } }
@container (min-width: 390px) { html[lang^="zh"] .lx-scope .stargo-post .sgc-pills { --sgc-pc: 4; --sgc-pg: 1.3rem; --sgc-last: 2; } }
@container (min-width: 505px) { html[lang^="en"] .lx-scope .stargo-post .sgc-pills { --sgc-pc: 4; --sgc-pg: 1.3rem; --sgc-last: 2; } }
@container (min-width: 680px) { html[lang^="zh"] .lx-scope .stargo-post .sgc-pills { --sgc-pc: 7; --sgc-last: 1; } }

/* The two chains keep their natural box widths (in a grid, English "Quote →
   PI → Order" did not fit at 320). Where the whole chain does not fit on one
   line, its last two boxes move to a second row — 3 | 2 for the five-step
   business chain, 2 | 2 for the relationship-map core — and the first of them
   loses its arrow and indent. Needed on one line (chart width): business
   chain 355px Chinese, 430px English (it sits in a lane); core 299px /
   412px, and 609px / 836px once the two cards stand side by side. */
.lx-scope .stargo-post .sgc-chain::after { content: var(--sgc-break, none); flex: 0 0 100%; order: 1; }
.lx-scope .stargo-post .sgc-chain li:nth-last-child(-n + 2) { order: var(--sgc-row2, 0); margin-top: var(--sgc-row2-gap, 0); }
.lx-scope .stargo-post .sgc-chain li + li:nth-last-child(2) { margin-left: var(--sgc-row2-indent, 1.35rem); }
.lx-scope .stargo-post .sgc-chain li + li:nth-last-child(2)::before { content: var(--sgc-row2-arrow, "→"); }
@container (width < 372px) {
  html[lang^="zh"] .lx-scope .stargo-post .sgc-lane .sgc-chain { row-gap: 0; --sgc-break: ""; --sgc-row2: 2; --sgc-row2-gap: .45rem; --sgc-row2-indent: 0; --sgc-row2-arrow: none; }
}
@container (width < 446px) {
  html[lang^="en"] .lx-scope .stargo-post .sgc-lane .sgc-chain { row-gap: 0; --sgc-break: ""; --sgc-row2: 2; --sgc-row2-gap: .45rem; --sgc-row2-indent: 0; --sgc-row2-arrow: none; }
}
@container (width < 312px) or ((width >= 560px) and (width < 625px)) {
  html[lang^="zh"] .lx-scope .stargo-post .sgc-chain-core { row-gap: 0; --sgc-break: ""; --sgc-row2: 2; --sgc-row2-gap: .45rem; --sgc-row2-indent: 0; --sgc-row2-arrow: none; }
}
@container (width < 428px) or (width >= 560px) {
  html[lang^="en"] .lx-scope .stargo-post .sgc-chain-core { row-gap: 0; --sgc-break: ""; --sgc-row2: 2; --sgc-row2-gap: .45rem; --sgc-row2-indent: 0; --sgc-row2-arrow: none; }
}

@container (min-width: 600px) {
  /* The five-column business loop. Chinese: 「采购 · 生产 · 库存」 needed
     105px on a line of 95px at 768 and 104px at 1440, and wrapped after the
     second dot. The card is a little tighter and the line a little smaller,
     so each label fits; if one ever wraps, it wraps after a dot, between
     whole items (tools/blog.mjs chartLoop), and balanced. */
  html[lang^="zh"] .lx-scope .stargo-post .sgc-flow-5:not(.sgc-numbered) .sgc-step { padding: .85rem .55rem; }
  html[lang^="zh"] .lx-scope .stargo-post .sgc-flow-5:not(.sgc-numbered) .sgc-step-text { font-size: .8rem; text-wrap: balance; }
  /* English: five columns of about 100px stacked every two-word title
     ("Proactive / acquisition", "Repeat / growth") and most tags and labels.
     The loop runs three and two, the second row centred, like the other
     wrapped step rows (no arrow at a row start). */
  html[lang^="en"] .lx-scope .stargo-post .sgc-flow-5:not(.sgc-numbered) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[lang^="en"] .lx-scope .stargo-post .sgc-flow-5:not(.sgc-numbered) > li { grid-column: span 2; }
  html[lang^="en"] .lx-scope .stargo-post .sgc-flow-5:not(.sgc-numbered) > li:nth-child(4) { grid-column: 2 / span 2; }
  html[lang^="en"] .lx-scope .stargo-post .sgc-flow-5:not(.sgc-numbered) > li:nth-child(4)::before { content: none; }
}
@container (min-width: 560px) {
  /* English storyboard beats: four beats of about 70px beside the formats
     read "The / product", "The / benefits", "The next / step". Two by two
     they hold each beat on one line. */
  html[lang^="en"] .lx-scope .stargo-post .sgc-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[lang^="en"] .lx-scope .stargo-post .sgc-frame-beat { min-height: 5.25rem; }
}

/* The date line under an article title: the date and the author stay whole,
   so it breaks only between its three parts (「STARGO WORK / 团队」 on every
   phone, "The / STARGO WORK team" at 320). */
.lx-scope .lx-post-meta :is(time, .lx-post-by) { white-space: nowrap; }

/* Homepage "Latest articles": the cards in a row are one height and their
   content sat at the bottom, so a card with a shorter title had its image
   25px lower than its neighbours. The content starts at the top; the spare
   height stays at the foot of the shorter cards. */
.blog-grid .blog-wrapper { justify-content: flex-start; }

/* AI teamwork chart (tools/blog.mjs chartTeam; the visual guide and the 288
   article), English, below 640px of chart width. The role cards were laid
   out at 9rem, which Chinese fits and English does not: two cards of 155px
   at 414 and three of 155–159px at 600 and 1024 read "Creative / specialist",
   "Product / specialist", "Review and / coordination", "Plan the /
   engagement" and "Check and / consolidate". The longest two-line task,
   "Check and consolidate", needs 138px plus the card's 27.6px of padding and
   border, so a card is never narrower than 11rem: two columns where two of
   those fit (480, 600, 1024), one where they do not (320–414). The lead card
   spans the row, as it does from 640px, so a row never ends on an empty
   cell, and a name or task that ever runs out of room breaks evenly. The
   messages under the cards name the same roles: at 320 their lines read
   "Product specialist → Creative / specialist" and "Target account list
   handed / over"; they break evenly too. */
@container (max-width: 639.98px) {
  html[lang^="en"] .lx-scope .stargo-post .sgc-roles { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 11rem), calc(50% - .25rem)), 1fr)); }
  html[lang^="en"] .lx-scope .stargo-post .sgc-role-lead { grid-column: 1 / -1; }
}
html[lang^="en"] .lx-scope .stargo-post :is(.sgc-role-name, .sgc-role-task, .sgc-msg-who, .sgc-msg-text) { text-wrap: balance; }

/* ---- V8-STAGE: the last business stage keeps its picture ------------------

   Mono's five stage rows share one sticky picture box and light it one at a
   time: SCROLL_INTO_VIEW sets a row's `.service-media-wrap` to opacity 1,
   SCROLL_OUT_OF_VIEW sets it back to 0, both at a 50% offset, so the row
   crossing the viewport's midline is the one on screen. Past the last stage
   nothing is lit and the box sits empty until it scrolls out — half a viewport
   height, i.e. 488px measured at 768x1024, 420px at 1440x900 and 622px at
   1920x1080, and 0px with the script.

   js/stargo-stage-hold.js puts this class on the stage nearest the midline, and
   only while the runtime has nothing lit and the list is still in view — the
   stage the runtime's own rule would light if its band were continuous. It is `!important`
   because the runtime writes its own value inline; that way the runtime keeps
   its state, and removing the class shows whatever it wants at that moment. The
   donor's own switch has duration 0, so an instant hold matches it. Nothing
   else about the section changes. */
.service-media-wrap.sgp-stage-hold { opacity: 1 !important; }

/* ---- V7-BLOG r3: the owner's product screenshots (handoff of 2026-09-18) --

   Five article covers are now screenshots of the product instead of editorial
   artwork. A screenshot is 16:9 and it is an interface, so tools/blog-covers.mjs
   fits the whole picture inside the 3:2 cover frame on a flat plate taken from
   the screenshot's own border, rather than centre-cropping it and losing the
   left navigation.

   Two boxes then crop that 3:2 frame again — the blog index / story-strip /
   related card is 1:1 and the homepage card is 3 / 2.3 — and either crop cuts
   the navigation back off. Both stop cropping for these five covers and paint
   the same plate colour, so the card still fills its box and the interface
   inside it is still whole. Nothing else moves: no box changes size, ratio,
   radius, position, hover or interaction, and the two articles that keep their
   editorial cover keep the crop they always had. The article hero is already
   3 / 2, so its picture fills it exactly either way.

   `background-image: none` is for the homepage card only: Mono paints a
   decorative SVG behind .testimonials-photo which would otherwise show through
   the plate now that the picture no longer covers the whole box. */
:is(.lx-blog-image, .blog-grid .testimonials-photo):is(
  [src$="/stargo-work-visual-guide.webp"],
  [src$="/start-with-one-workflow.webp"],
  [src$="/from-inquiry-to-quote.webp"],
  [src$="/ai-operating-system-for-global-trade.webp"],
  [src$="/288-ai-employees-not-288-chatbots.webp"]
) { object-fit: contain; background-image: none; }
/* The plate of each cover, as written into the file by tools/blog-covers.mjs. */
:is(.lx-blog-image, .blog-grid .testimonials-photo)[src$="/stargo-work-visual-guide.webp"] { background-color: #021d4d; }
:is(.lx-blog-image, .blog-grid .testimonials-photo)[src$="/start-with-one-workflow.webp"] { background-color: #001135; }
:is(.lx-blog-image, .blog-grid .testimonials-photo)[src$="/from-inquiry-to-quote.webp"] { background-color: #e8f1fe; }
:is(.lx-blog-image, .blog-grid .testimonials-photo)[src$="/ai-operating-system-for-global-trade.webp"] { background-color: #0e2b5a; }
:is(.lx-blog-image, .blog-grid .testimonials-photo)[src$="/288-ai-employees-not-288-chatbots.webp"] { background-color: #00173c; }

/* The homepage card draws Mono's arrow badge over the top right of the cover
   (`.button-icon-main.sec`: 50x40, 25px inside the card, and the card's picture
   starts 15px below the card's own top — measured identical at 360, 390, 480,
   560, 640, 768, 900, 992, 1100, 1200, 1280, 1366, 1440, 1600 and 1920). The
   badge therefore reaches exactly 50px into the picture's box at every width,
   while the box itself is 197px wide at 992 and 309px at 1920 — which is why
   this band is 50px of that box and not a share of the picture. The picture is
   `box-sizing: border-box`, so the band takes its space from the picture and
   moves nothing on the card; the same plate fills it, and the badge lands on
   the plate at every width. The blog index, the article hero and og:image are
   untouched: no badge is drawn over them.

   `padding-bottom` balances it optically; the 6px difference is the gap the
   badge keeps from the interface. */
.blog-grid .testimonials-photo:is(
  [src$="/stargo-work-visual-guide.webp"],
  [src$="/start-with-one-workflow.webp"],
  [src$="/from-inquiry-to-quote.webp"],
  [src$="/ai-operating-system-for-global-trade.webp"],
  [src$="/288-ai-employees-not-288-chatbots.webp"]
) { padding-top: 56px; padding-bottom: 6px; }

/* The same for the three "keep reading" cards under the third-party notices
   (tools/build-site.mjs, PAGES['notices.html']). The half-card is about
   1.4 : 1 and these pictures are 16:9, so the box holds the picture's own
   border colour instead of cropping 13% off each side of an interface. The
   band is this page's alone — .blog-photo-overlay exists nowhere else. */
.blog-flex .blog-photo-overlay[src$="/sw003-ai-workspace-home.webp"] { object-fit: contain; background-color: #0e2b5a; }
.blog-flex .blog-photo-overlay[src$="/sw004-experts-library.webp"] { object-fit: contain; background-color: #021d4d; }
.blog-flex .blog-photo-overlay[src$="/live18-quote-approval-16x9.webp"] { object-fit: contain; background-color: #f4f6f8; }
/* V7-BLOG-END */


/* V7-CAP-START (capabilities page fixes) */

/* 1. The catalogue band (#atlas) on the page grid.
      The band sat on its own grid: `5vw` side padding and a 1180px column
      (38.4px and 130px from the edge at 768 and 1440, 22px at 390), while the
      foundations section right above it — and the other qubix sections of the
      page — set their words on qubix's container: 16px from the edge below
      480, a 540px column with 24px inside to 767, 767px with 32px to 991,
      and 1360px with 40px from 992. So 「完整目录」 started 50px right of
      「经过验证的改进」 at 1440 and 5–6px off it at 768 and 390. The band now
      uses the same container, written as the section's padding plus a
      maximum width for the column (the container's width less its padding).
      Its first band also dropped a 76px (52px on phones) top margin meant for
      a band between two groups of rows: with one band left, at the top of
      the section, it only pushed the heading further below the section's
      own 140px (80px) top padding. */
#atlas.cn-capmap { padding-left: 40px; padding-right: 40px; }
#atlas .cn-capmap-inner { max-width: 1280px; }
#atlas .cn-capmap-inner > .cn-band:first-child { margin-top: 0; }
@media screen and (max-width: 991px) {
  #atlas.cn-capmap { padding-left: 32px; padding-right: 32px; }
  #atlas .cn-capmap-inner { max-width: 703px; }
}
@media screen and (max-width: 767px) {
  #atlas.cn-capmap { padding-left: 24px; padding-right: 24px; }
  #atlas .cn-capmap-inner { max-width: 492px; }
}
@media screen and (max-width: 479px) {
  #atlas.cn-capmap { padding-left: 16px; padding-right: 16px; }
  #atlas .cn-capmap-inner { max-width: none; }
}

/* 2. Catalogue group names wrap between words only.
      The names are one run of text (not split per character), so `keep-all`
      removes the breaks between characters and leaves the space after the
      number, the 「、」 and the <wbr>s the builder puts between words
      (tools/lib-html.mjs, zhWbr). Before: 「04 询盘与多渠道沟 / 通」,
      「08 ERP、订单与履 / 约」 at 320, 「12 企业业务关系与上下 / 文」 and
      「13 权限、审批与经营控 / 制」 at 360. `balance` then evens a name that
      takes two lines, as the site does for the other accordion headings
      (the zh sweep above). The longest word is three characters, far inside
      the narrowest row; `anywhere` is only the belt. English names break at
      their spaces and are balanced so a name does not end on one word
      ("08 ERP, Orders & / Fulfillment" at 320–390). */
html[lang^="zh"] .cn-capmap .cn-accordion-heading {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
html[lang^="en"] .cn-capmap .cn-accordion-heading { text-wrap: balance; }

/* 3. The closing line in #start (「演示按你的业务流程进行：…」). GSAP splits it
      into one box per character, so the browser could break it anywhere and
      did, at every width (「仍/在」 at 375 and 768, 「直/接」 and 「建/设」 at
      390, 「部/分」 at 360, 「说/明」 at 320). The builder wraps each word of it
      in `.zh-keep` (tools/lib-html.mjs, zhKeep), and a word never breaks. */
html[lang^="zh"] #start .zh-keep { white-space: nowrap; }

/* 4. English headings and card titles that ended on one word (measured at
      320–1440 before): foundation titles ("Knowledge and business /
      relationships", "Connections, by / authorization" at 768–1440), the
      split foundations heading ("area rests / on" at 360–390), the teamwork
      card titles ("288 cross-functional specialist / roles" at 320, "Roles,
      exchange, parallel work and / handoffs" at 360–390), the #story-4 theme
      names ("Stock, production & / quality") and the rollout heading in
      #start ("Across the company, in / phases" at 320–768). Balance only
      moves the break; no box changes size. The Chinese page balances its own
      headings already, or does not need to. */
html[lang^="en"] .qx-whatwedo .qx-h5,
html[lang^="en"] .qx-whatwedo .qx-wrapper-content-service .qx-h2,
html[lang^="en"] .qx-whatwedo .qx-wrapper-content-service .qx-text-heading-servie,
html[lang^="en"] .qx-projects .qx-project-card-title,
html[lang^="en"] .rk-testimonials .rk-rt-text-style-h4,
html[lang^="en"] body:has(#atlas) #start h2.about-title {
  text-wrap: balance;
}

/* 5. The same for the English card lines under them. The nine steps'
      descriptions ("…reach out through authorized / channels." at 390,
      "…not / guessed." at 1024 and 1440) take `pretty`, which reworks only
      the last lines of a paragraph, as the Chinese page already does for
      them (the zh orphan rule above). The four area cards' lines ("…from
      one / workspace.", "…tasks and / improvement." at 320–360) are short
      paragraphs of up to four lines, where Chromium's `pretty` kept the
      single word; they are balanced instead. */
html[lang^="en"] .rk-insight .rk-rt-insights-text {
  text-wrap: pretty;
}
html[lang^="en"] body:has(#atlas) .macro-desc {
  text-wrap: balance;
}

/* V7-CAP r2 ------------------------------------------------------------- */

/* 6. The Chinese caption 「(常见问题)」 in #start. It sits in the first of four
      grid cells, 69px wide at 320 and 79px at 360, and needs 79px at its
      17.6px, so it read 「(常见问 / 题)」 at 320 and 「(常见问题 / )」 at 360. On
      one line the cell takes the caption's width (the three dots beside it
      move 10px right at 320 and 1px at 360; nothing else moves) and the page
      does not scroll sideways. The reveal splits the caption into lines when
      the page loads, so this has to be in the stylesheet, not added later. */
html[lang^="zh"] #start .bottom-grid._1.grd > .top-text.big { white-space: nowrap; }

/* 7. The white band under the 「聊聊你的流程」 marquee. The marquee's own
      bottom margin (8rem, 4rem on phones) passed through its black wrapper
      (margin collapsing), so the white page showed for 64–128px between two
      dark sections. As its own formatting context the wrapper keeps that
      margin inside, and the band is black like the wrapper; the marquee and
      the section below stay where they were. .cn-produce is on this page
      only, right after #story-5.
      Under 480px the section below brings a top margin of its own (the
      donor's 60px on .qx-home-project-section), which used to collapse into
      the marquee's 64px and now stood alone: a 60px white band under the black
      one. The marquee's margin already parts the two dark sections, so that
      margin is dropped here, and #story-6 starts where it did before. */
#story-5 + .cn-produce { display: flow-root; }
@media screen and (max-width: 479px) {
  #story-5 + .cn-produce + #story-6 > .qx-home-project-section { margin-top: 0; }
}

/* 8. The Chinese title 「一条业务 / 主线 / /09」 in #loop. The donor stacks its
      Latin lines at line-height 1 and pulls each lower line up (-1.7rem from
      1280, -.5rem to 768), which suits Latin letters, whose ink sits well
      inside the line. Chinese characters fill almost the whole em, so the
      strokes of 业 and 条 ran into 主 and 线 (22px of overlap at 1440, 5–7px at
      768) and the slash touched 主线. Chinese lines are not pulled up, and get
      a little leading: 1.06em, or 4px where 1.06em is less (the 39px phone
      size, where the lines only just touched before). English is unchanged. */
html[lang^="zh"] .rk-award .rk-rt-extra-big-text { line-height: max(1.06em, 1em + 4px); }
html[lang^="zh"] .rk-award .rk-rt-awards-second-text,
html[lang^="zh"] .rk-award .rk-rt-awards-third-text { margin-top: 0; }

/* 9. English accordion names under 375px (the catalogue rows and the seven
      creative topics). Balance cannot keep the last two words together when
      they are wider than the box — "Customer Conversations" is 240px at 20px
      and the box is 197px at 320, 237px at 360 — so a name ended on one word:
      "02 … / Opportunity / Research", "04 … / Conversations",
      "06 … / Knowledge", "07 … / Records", "3. Viral Creative / Adaptation",
      "7. … / Editing". The size follows the box (about 12px of width per 1px
      of type for that pair) from 16px at 320 to the donor's 20px at 372px,
      and is never above 20px. Chinese names are not affected. */
@media screen and (max-width: 374px) {
  html[lang^="en"] .cn-capmap .cn-accordion-heading,
  html[lang^="en"] #story-5 .cn-accordion-heading {
    font-size: clamp(1rem, calc(8.2vw - 10.5px), 1.25rem);
  }
}

/* 10. The English split heading at #foundations on phones. "What every" needs
       150px at the donor's 32px and its half is 104px wide at 320 and 148px at
       479, so it stood as "What / every" (and "area / rests on") at every
       phone width. As on the Chinese page (the zh sweep above), the type comes
       down with the screen so that each half is one line: the two halves need
       10.4em together and have 75vw - 32px, so 7vw - 3.1px leaves a few pixels
       spare at every width; min() keeps 32px wherever that is smaller. */
@media screen and (max-width: 479px) {
  html[lang^="en"] .qx-whatwedo .qx-wrapper-content-service .qx-h2,
  html[lang^="en"] .qx-whatwedo .qx-wrapper-content-service .qx-text-heading-servie {
    font-size: min(32px, calc(7vw - 3.1px));
    white-space: nowrap;
  }
}

/* V7-CAP-END */


/* V7-LX-START (workforce, intelligence, enterprise, about fixes) */

/* intelligence.html — the three expandable cards under the hero, on phones.
   Below 768px each card is in the page flow; IX2 fades it in and then
   collapses it from 24 / 25 / 21.5rem to 5rem while it is scrolled past. The
   card is a bottom-aligned flex column that clips, and its text sat a fixed
   7rem above the icon row, so the collapse cut into the text from the first
   pixel it shrank: the third card (主动工作) only turns opaque when its top is
   about 100px from the top of the screen, and at 390 its text was clipped
   60px of scrolling later (four lines at 360, 「…推」/「进。」).
   The gap is now flexible: the content fills the card, text at the top and
   icon row at the bottom as before, and the space between them (at least
   1.5rem) is what the collapse takes first. Card 2 is a bottom-aligned row in
   the template; it becomes the same bottom-aligned column so the same rule
   applies. The IX2 timeline, heights and opacity are untouched.
   Below 480px the three texts are 1.75rem (the template's 2rem gave seven
   characters a line at 320). The Chinese texts break only at punctuation and
   at the <wbr>s in the copy, at every width, so no word is split any more
   (before: 「报/价」「负责/人」「验/收」「授/权」 and a lone 「进。」 at
   320-480, 768-1024): 「关注机会、期限和异常，」/「有依据地提建议，」/
   「按授权推进。」 at 390. In the 182px tablet columns (768) the Chinese
   texts are 1.4rem so an eight-character phrase fits a line; four lines, as
   before. The titles beside the icons keep their size.
   V7-LX r2: this holds at every width (the collapse runs from 768 up as well:
   「客户、产品、报价、订单」 was sliced through by the card's top edge at 1440,
   "Workflow first, then" in English), and the text no longer slides under
   that edge at all once the card is shorter than text + gap + icon row. The
   content is a wrapping column laid out from the bottom (icon row first):
   when the paragraph no longer fits above the icon row it moves whole into a
   second column, outside the clipped card, instead of being cut line by line;
   it comes back whole when the card grows again. */
html[lang^="zh"] .lx-scope .lx-expandable-content > .lx-expandable-text {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[lang^="zh"] .lx-scope .lx-expandable-content > .lx-expandable-text { font-size: 1.4rem; }
}
@media screen and (max-width: 479px) {
  .lx-scope .lx-expandable-content > .lx-expandable-text { font-size: 1.75rem; }
}
.lx-scope #lx-ontology .lx-expandable-item.lx-_2 {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
}
.lx-scope #lx-ontology .lx-expandable-item > .lx-expandable-content {
  flex: 1 1 0;
  min-height: 0;
  flex-flow: column-reverse wrap;
  justify-content: space-between;
  align-content: flex-start;
  grid-row-gap: 1.5rem;
  row-gap: 1.5rem;
}
.lx-scope #lx-ontology .lx-expandable-content > .lx-expandable-icon-text { order: -1; }

/* The closing clause of a Chinese paragraph (tools/build-site.mjs zhTail):
   one unit, so an availability clause such as 「高级改进仍在完善。」 is never
   split (「高级」/「改进…」 at 1024) and never leaves 「完善。」 alone
   (390). Inline-block: it drops to the next line whole, and only a clause
   longer than the line wraps inside itself. */
html[lang^="zh"] .lx-scope .lx-v7-tail { display: inline-block; }

/* intelligence.html — the bubble marquee. Each row's two copies move by
   -100% of their own width (IX2, 60s a loop), so they must be equally wide;
   the build now gives both copies the same bubbles. The template's row is a
   fixed 625rem (10,000px), which the English copies (about 5,090px each)
   outgrew: flexbox squeezed them to 5,000px. The row now takes its content's
   width, 625rem at least, so no copy is squeezed. */
.lx-scope .lx-cta-author-list { width: max-content; }

/* intelligence.html, English display lines of two sentences (the hero line
   and 「Divide the work. Finish it together.」): each sentence is a span
   (tools/build-site.mjs enSentences), an inline-block that wraps and
   balances inside itself, so lines break between the sentences first.
   Before: "Divide the / work. Finish / it together." at 320 and "Know the /
   company. Keep / work moving." at 1440 and 1920.
   - The hero line sits in the grid's narrow right column (277px at 1440,
     263 at 1280), and each sentence is about 330px at 38.4px. From 1280 the
     line's box starts 6rem left of that column (a percentage width and a
     negative margin, so the grid's own column sizes do not change), which is
     clear of the phone, so it reads "Know the company." / "Keep work
     moving."; the box's right edge stays where it was.
     Between 992 and 1279 the phone is too close, and the line keeps its
     column: "Know the / company." / "Keep work / moving.".
   - The team heading pair is 2.7rem on a phone; "Finish it together." is
     339px there, wider than a 320-360px screen's 288-328px. Below 375px the
     pair is 2.25rem, and it reads "288 AI roles." / "Divide the work." /
     "Finish it together.". */
html[lang="en"] .lx-scope .lx-v7-sentence {
  display: inline-block;
  text-wrap: balance;
}
@media screen and (min-width: 1280px) {
  html[lang="en"] .lx-scope .lx-hero-home-text-holder > .lx-hero-desc {
    width: calc(100% + 6rem);
    max-width: none;
    margin-left: -6rem;
  }
}
@media screen and (max-width: 374px) {
  html[lang="en"] .lx-scope .lx-team-section .lx-flex-text-center .lx-heading-style-h1 { font-size: 2.25rem; }
}

/* workforce.html — the hero (both languages; `.lx-hero-features` is on this
   page only).
   - The lede had no side gutter below 768px: the template zeroes the padding
     of this hero's `.lx-padding-global`, so the text ran 0-3px from the
     screen edges. It gets the site's 16px (the title keeps the full width,
     so "288 specialized" still fits one line at 320).
   - Chinese lede: it breaks at punctuation and spaces only, so a word is never
     split (「按配」/「置、」 from 768 to 1920; 「聊」/「天」, 「合」/「规」,
     「专业服」/「务」, 「企业支」/「持」, 「目录数」/「量」 on phones). The
     longest run is about ten characters, well inside the narrowest line; the
     build binds a figure to the word after it (「288 个」).
   - The text ran over the floating photo cards (the template's own short copy
     fitted between them; ours is longer): at 1440 the English white line ran
     about 90px across the right-hand laptop. The title is 3.125rem from 1280
     and 2.5rem from 768 to 1279 instead of 4rem, the lede is 36rem wide from
     992 to 1279, and from 768 the text block and its button sit a little
     lower (1.75rem from 992, .75rem below). Measured at rest with the viewport
     heights of 1024 (768-991) and 900: the title, lede and button clear all
     five cards at 768, 820, 900, 992, 1024, 1100, 1280, 1440 and 1920, in
     both languages. On phones the cards sit at the screen edges exactly where
     the lede's lines run, so the text is made legible instead: a black band
     behind the text block (behind the text, in front of the cards) dims a
     card where it passes under the text. The same veil, as a soft ellipse,
     is behind the text on wider screens, for the moments the cards' scroll
     motion carries them under it. The cards keep their places and motion. */
.lx-scope .lx-hero-features .lx-feature-hero-text-holder::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.5rem -3rem;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85) 62%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
html[lang^="zh"] .lx-scope .lx-hero-features .lx-feature-description-holder .lx-text-size-regular {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 1280px) {
  .lx-scope .lx-hero-features .lx-feature-title-holder .lx-heading-style-h1 { font-size: 3.125rem; }
}
@media screen and (min-width: 992px) {
  .lx-scope .lx-hero-features .lx-feature-hero-text-holder,
  .lx-scope .lx-hero-features .lx-about-button-holder { top: 1.75rem; }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .lx-scope .lx-hero-features .lx-feature-description-holder { max-width: 36rem; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .lx-scope .lx-hero-features .lx-feature-title-holder .lx-heading-style-h1 { font-size: 2.5rem; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .lx-scope .lx-hero-features .lx-feature-hero-text-holder,
  .lx-scope .lx-hero-features .lx-about-button-holder { top: .75rem; }
}
@media screen and (max-width: 767px) {
  .lx-scope .lx-hero-features .lx-feature-description-holder {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lx-scope .lx-hero-features .lx-feature-hero-text-holder::before {
    inset: -1.5rem 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8) 1.5rem, rgba(0, 0, 0, .8) calc(100% - 1.5rem), rgba(0, 0, 0, 0));
  }
}

/* workforce.html, Chinese — the role-group intro beside the list
   (「每个岗位都应有职责、技能、企业知识、可用权限和工作记录。…」) breaks at
   its punctuation only: it split 「可用」/「权限」 at 360, 「任」/「务」 at 390,
   「工作」/「记录」 at 430 and 「需」/「要」 at 1024. Its longest run is twelve
   characters; the column holds at least eighteen, and the intro keeps its
   three to four lines. */
html[lang^="zh"] .lx-scope .lx-v6-roster-intro {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* workforce.html — the pink panel (.lx-capabilities-grid and the cards in it,
   this page only).
   - 768-991: the template kept its desktop split there, the heading in a
     192px column and the cards in 416px beside it, so every card was cramped:
     the desktop card (.lx-organized-mind) gave its text a ~160px column (a
     16-line English paragraph under a 4-line heading, list items of 3-4
     lines, 「…转成任」/「务」), and the small cards had 138px (「交接有」/
     「记录」). From 768 to 991 the panel stacks as the template stacks it
     below 768 — heading on top, then the card grid at the full panel width —
     so the small cards are 308px and more, and the desktop card keeps its own
     desktop layout (text beside the collage) at 640px and more.
   - Below 768 the desktop card is one column and the template pads its text
     on the left only; the right side gets the same padding so lines stop
     short of the card's edge (they ran to it).
   - Phones: the black note 「浏览器里的企业桌面」 / "A business desktop on the
     web" was 32% of the collage strip, 77px at 320, so it broke into five
     two-character lines (「浏览/器里/的企/业桌/面」), and the people circle,
     which comes later in the markup, covered half of it. The note is now a
     fixed 7rem with 1rem type — five Chinese characters a line, so it reads
     「浏览器里的」/「企业桌面」 at every phone width, and "A business /
     desktop on / the web" — and it is drawn above the circle; the circle
     moves to the bottom of the strip (3rem taller) and the role card to its
     upper right, so neither the note nor the circle hides the other. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .lx-scope .lx-capabilities-grid { grid-template-columns: 1fr; }
}

/* workforce.html — the team scenario (#lx-team). The display line 「一个目标，
   一个团队。」 / "One goal, one team." sits behind the three stacked cards,
   which IX2 (lx-a-73) slides up one by one over the section's scroll. While
   the cards cover it, only its edges showed between their rotated corners,
   and read as stray marks: a lone white square left of card 03 at 390 (the
   end of 「一」), 「—」, 「，」 and 「。」 around the cards at 768 and 1440.
   The line now stays invisible while it is covered and fades in while the
   last card uncovers it. Measured on the section's own scroll range (0 when
   its top meets the top of the screen, 100% when its bottom meets the
   bottom): the third card starts to move at about 62-65% and has left the
   line at 81-83%, at 390, 768 and 1440; the line starts to show under it at
   about 70%, so the fade runs from 68% to 84%.
   The cards' motion is IX2's and is untouched; where a browser has no
   scroll-driven animations, the line behaves as before. */
/* workforce.html, English — the three scenario cards and two short lines.
   - Each card heading is two clauses (tools/build-site.mjs writes one
     `.lx-v7-clause` span per clause), and each clause keeps to its own line:
     "Check the results," / "then a person decides" rather than "…then a
     person" / "decides" (768-1920). The heading box is the card's 75% less
     its padding, 280px from 768 up, and the longer clause is 325px at 2rem,
     so the English text box is 90% of the card (340px); between 480 and
     599 the card is narrower and the headings are 1.75rem. Below 480 the
     headings are 1.25rem (1.125rem below 360) in a box that runs to the
     card's right padding (185px at 320), where every clause fits one line.
   - The label over each heading keeps "scenario · 01" together (no-break
     spaces in the build); at 320 it read "Illustrative scenario" / "· 01".
   - The pink panel heading, "Roles, teams and a desktop", is balanced: it
     left "desktop" alone at 360, 390, 1440 and 1920.
   - The role card in the desktop collage (hover shows its name) is 9rem
     from 992 up, where "Reporting AI" wrapped; it is 10rem there, the size
     the template gives it from 768 to 991, where the name fits one line. */
html[lang="en"] .lx-scope .lx-v7-clause {
  display: inline-block;
  text-wrap: balance;
}
html[lang="en"] .lx-scope .lx-answers-card-text { width: 90%; }
html[lang="en"] .lx-scope .lx-v6-panel-title { text-wrap: balance; }
@media screen and (max-width: 479px) {
  html[lang="en"] .lx-scope .lx-answers-card-text {
    width: auto;
    padding-right: 1.25rem;
  }
  html[lang="en"] .lx-scope .lx-answers-card-text .lx-heading-style-h4 { font-size: 1.25rem; }
}
@media screen and (max-width: 359px) {
  html[lang="en"] .lx-scope .lx-answers-card-text .lx-heading-style-h4 { font-size: 1.125rem; }
}
@media screen and (min-width: 480px) and (max-width: 599px) {
  html[lang="en"] .lx-scope .lx-answers-card-text .lx-heading-style-h4 { font-size: 1.75rem; }
}
@media screen and (min-width: 992px) {
  .lx-scope .lx-v6-collage-card { width: 10rem; }
}

/* enterprise.html — the owner-cockpit band (.about-grid, this page only).
   From 992 the lead's rule further up ("V6 review fixes", 2) lets the three
   picture frames grow with the text column, and the band has no blank run
   (measured 1024 and 1440, both languages: frames end where the text ends).
   Between 768 and 991 the same rule stretched three landscape pictures into
   359px-wide frames up to 1024px tall beside a text column in which a step
   of the delivery list held two words a line ("Prepare / company /
   context:"). There the band now stacks as the template stacks it below
   768: the three pictures in a row on top at the template's small heights
   (scaled to the wider row), the text under them across the band. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .about-grid {
    display: flex;
    flex-flow: column-reverse;
    grid-row-gap: 40px;
    row-gap: 40px;
  }
  .about-grid > .about-images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 16px;
    column-gap: 16px;
  }
  .about-grid > .about-max-w { max-width: none; }
  .about-grid > .about-images .work-content-wrapper { flex: none; }
  .about-grid > .about-images .work-content-wrapper._01 { height: 12rem; }
  .about-grid > .about-images .work-content-wrapper._02 { height: 20rem; }
  .about-grid > .about-images .work-content-wrapper._03 { height: 13rem; }
}

/* enterprise.html — the connections table (#table). Its header labels kept
   the template's placement (the last one pushed to the right edge of its
   column, the middle one centred from 992 and right-aligned from 480 to 991),
   while the cells under them are left-aligned sentences, so 「(接入前要确认)」
   / "(Confirm first)" sat over the far end of text that starts at the left.
   From 480 (where the header is a real three-column row) each label starts
   where its column's text starts, and every cell fills its column (the
   third cells hugged the right edge, so in Chinese, where they are shorter
   than the column at 1440 and 1920, each row's text started somewhere
   else). Below 480 the header is a centred legend
   over centred stacks (rule 2 further up) and is left as it is. */
@media screen and (min-width: 480px) {
  #table .grdi-3-columns.mk3 > .top-text { justify-self: start; text-align: left; }
  #table .award-wrapper > .award-text { justify-self: stretch; }
}
/* The Chinese cells break at their punctuation and spaces only where a
   phrase fits a line — in the stacked rows on phones and in the wide columns
   from 992: they split 「有/权人员」 at 1440, and 「平/台」, 「生/产」,
   「付/款」 on phones. Between 480 and 991 the columns hold about eleven
   characters, less than the longest phrase, and keep their normal breaking. */
@media screen and (max-width: 479px), screen and (min-width: 992px) {
  html[lang^="zh"] #table .award-text {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* enterprise.html — the four story panels (.studio-sticky, this page only).
   Mono ends each panel's text 60px above the bottom of the screen, and from
   992 the fixed pill navigation (.menu-bottom) reappears whenever the reader
   scrolls up: 50px tall, 15px off the bottom, 590-830px wide across the
   middle. At 1024, 1440 and 1920 it covered the last line of the panel text
   — "…reviews always stay with authorized people" (Decisions), "the result is
   checked" (Results), 「按企业情况确认。」 (Connect), "the decisions that
   matter come first" (Oversight). From 992 the panels end their text 100px
   above the bottom, which clears the pill with 35px to spare. */
@media screen and (min-width: 992px) {
  .studio-sticky { padding-bottom: 100px; }
}

/* about.html — the introduction card in the hero (.cn-about, this page
   only). Since V6 it carries the headline, the description and the closing
   line in one paragraph, and below 480px that paragraph was 22px type in a
   card that is 95% of the band with 24px of padding: 26 lines in English at
   320 (the card 1,045px tall, the demo button 1,080px down the page) and 17
   in Chinese. Below 480 the card now takes the band's full width, its
   padding and gaps are 20 / 16px, and the paragraph is 18px at 1.45 — the
   copy is unchanged. */
@media screen and (max-width: 479px) {
  .cn-about .cn-intro-container { width: 100%; }
  .cn-about .cn-intro-content-block {
    padding: 1.25rem 1.25rem 1.5rem;
    grid-row-gap: 1rem;
    row-gap: 1rem;
  }
  .cn-about .cn-text-size-large { font-size: 1.125rem; line-height: 1.45; }
}

/* about.html and pricing.html, Chinese — the scenario quotes in the review
   band (.cn-about-reviews on About, .cn-reviews on Pricing; each block is on
   that one page). The blocks mark the quotes' word boundaries with <wbr>
   (zhQuote in tools/blocks/cn-about-reviews.mjs and cn-reviews.mjs); here the
   line breaks only there and at punctuation, and `pretty` keeps a short last
   line off the end. Before: 「…采用改」/「进。」」 at 390 (Pricing),
   「…明确资」/「料、…」 at 1440 (both). On Pricing this changes where these
   four quotes break and nothing else. */
html[lang^="zh"] :is(.cn-about-reviews, .cn-reviews) p.cn-text-size-large {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Short Chinese phrases the build binds together (tools/build-site.mjs
   zhKeep) in text the reveal splits per character: the enterprise cockpit
   paragraph (「管得/住，」, 「查/得清。」), the delivery steps (「定目/标」)
   and the pull-quote (「可管/理」, 「可验/证」, 「“已经/完成”」). */
html[lang^="zh"] .stargo-keep { white-space: nowrap; }

@keyframes lx-v7-team-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@supports (animation-timeline: view()) {
  .lx-scope #lx-team.lx-answers-card-section-holder { view-timeline: --lx-v7-team block; }
  .lx-scope #lx-team .lx-v6-team-display {
    animation: lx-v7-team-reveal linear both;
    animation-timeline: --lx-v7-team;
    animation-range: contain 68% contain 84%;
  }
}
@media screen and (max-width: 767px) {
  .lx-scope .lx-organized-mind-text { padding-right: 1.5rem; }
  .lx-scope .lx-organized-mind .lx-confirmation-card { z-index: 2; }
}
@media screen and (max-width: 479px) {
  .lx-scope .lx-organized-mind-images { height: 17rem; }
  .lx-scope .lx-organized-mind-images > .lx-people-image-holder { margin-top: auto; }
  .lx-scope .lx-organized-mind .lx-confirmation-card { width: 7rem; }
  .lx-scope .lx-organized-mind .lx-confirmation-card h6 { font-size: 1rem; }
  .lx-scope .lx-organized-mind .lx-organized-mind-card { top: 22%; bottom: auto; }
}

/* The scan of the four pages (zh and en; 320, 390, 768, 1024, 1440) for
   lone words and split words in headings, labels and cards; each fix is
   scoped to its page.
   - intelligence.html, Chinese, the six object cards in the sticky column:
     one sentence each, and at 768 three of them ended on two characters
     (「…之前谈过」/「什么。」, 「…已经」/「批准。」, 「…结果如何」/「核对。」).
     They break at their commas now (「是谁，来自哪里，」/「之前谈过什么。」).
   - intelligence.html, English, the collapsed card titles at 768-991: "Real
     workflows" wrapped beside its icon, and a two-line title does not fit the
     5rem pill the card collapses to (its first line was cut). The titles are
     1.25rem there, with a 1.75rem icon and a .75rem gap, and stay on one line.
   - workforce.html, English, the small card titles and the desktop card
     title are balanced: "Teams formed by / task", "Delegate and / approve",
     "Handoffs on / record", "Browser / desktop and AI / office" became
     "Teams formed / by task", "Delegate / and approve", "Handoffs / on record",
     "Browser desktop / and AI office".
   - workforce.html, the three article titles in its article strip: balanced
     in English ("…keep the / authority", "…into a / company"), and in Chinese
     broken at punctuation and spaces only (「…AI，权/力留在企业」,
     「…AI 的正/确顺序」). The blog index keeps its own rules. */
html[lang^="zh"] .lx-scope .lx-sitcky-section .lx-home-features-texts .lx-text-size-regular {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[lang="en"] .lx-scope .lx-expandable-icon-text { grid-column-gap: .75rem; column-gap: .75rem; }
  html[lang="en"] .lx-scope .lx-expandable-icon-text .lx-expendable-icon { width: 1.75rem; }
  html[lang="en"] .lx-scope .lx-expandable-icon-text .lx-expandable-text { font-size: 1.25rem; }
}
html[lang="en"] .lx-scope .lx-little-grid-text-holder .lx-heading-style-h4,
html[lang="en"] .lx-scope .lx-organized-mind-text .lx-heading-style-h4,
html[lang="en"] .lx-page:has(.lx-hero-features) .lx-blog-title {
  text-wrap: balance;
}
html[lang^="zh"] .lx-page:has(.lx-hero-features) .lx-blog-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* enterprise.html, English — the five management component titles are
   balanced: "Capability & app / management", "Account & role / permissions",
   "Approval of key / actions", "Work & result / records" left their last word
   alone from 320 to 1024; they read "Approval of / key actions" and so on.
   `.team-grid` is on this page only. */
html[lang^="en"] .team-grid .team-content .h2 { text-wrap: balance; }

/* intelligence.html, English, phones: the collapsed card titles sit beside a
   2.4rem icon, and "Real workflows" wrapped at 320, which the 5rem pill a card
   collapses to cannot hold. Below 480 the gap beside the icon is .75rem and
   the titles are 1.75rem, the size of the card text above them. */
@media screen and (max-width: 479px) {
  html[lang="en"] .lx-scope .lx-expandable-icon-text { grid-column-gap: .75rem; column-gap: .75rem; }
  html[lang="en"] .lx-scope .lx-expandable-icon-text .lx-expandable-text { font-size: 1.75rem; }
}

/* enterprise.html — the story panels print white text straight on their
   pictures, and two of them are bright where the text runs on a phone: the
   metal lanes of (Connect) and the loading bay of (Oversight) ("authorization",
   "records", "Watch the business…" lost contrast at 390). A soft dark shadow
   under the panel text keeps it readable on any part of the picture; the
   pictures and the overlay are unchanged. */
.studio-sticky .about-flx .h2.for-abt,
.studio-sticky .about-flx .top-text.for-abt {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .55);
}

/* intelligence.html (both languages), the "no writing" band — the text-free
   screen laid over the hand-held phone (tools/build-site.mjs, V7-LX). The
   layer has the photograph's box (it is its sibling, absolutely placed), so
   the IX2 move/scale that both share lands them on the same pixels.
   `.stargo-nw-frame` is the photograph's picture inside that box: the
   template shows it object-fit: cover, anchored top left, from 768px (a box
   720px tall, so the picture is height-driven and cropped at the right on
   tablets), and at its natural ratio, full width, below 768px. The screen
   sits on the phone's own screen in the 1262x1474 picture (x 153-699,
   y 22-1204, 2px into the black bezel so no template pixel shows at the
   edge); its outline is the screen's rounded rectangle with the three
   fingertips that overlap the left edge cut out, so the fingers stay in
   front. The black pill is the camera cut-out the screen covers. */
.lx-scope .lx-no-writing-image-holder:has(> .stargo-nw-screen) { position: relative; }
.lx-scope .lx-no-writing-image.stargo-nw-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.lx-scope .stargo-nw-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: max(100cqw, 100cqh * 1262 / 1474);
  height: max(100cqh, 100cqw * 1474 / 1262);
}
@media screen and (max-width: 767px) {
  .lx-scope .stargo-nw-frame { width: 100%; height: auto; aspect-ratio: 1262 / 1474; }
}
.lx-scope .stargo-nw-frame .stargo-nw-art {
  position: absolute;
  left: 12.124%;
  top: 1.493%;
  width: 43.265%;
  height: 80.19%;
  max-width: none;
  object-fit: cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 546 1182' preserveAspectRatio='none'%3E%3Cpath d='M85 0H461A85 85 0 0 1 546 85V1097A85 85 0 0 1 461 1182H85A85 85 0 0 1 0 1097L0 1090L1.5 1087L4.5 1084L9.5 1081L13.5 1078L16.5 1075L19.5 1072L21.5 1069L22.5 1066L23.5 1063L24.5 1060L24.5 1057L24.5 1054L24.5 1051L24.5 1048L23.5 1045L22.5 1042L21.5 1039L21.5 1036L19.5 1033L17.5 1030L15.5 1027L12.5 1024L9.5 1021L6.5 1018L3.5 1015L1.5 1012L2.5 1009L2.5 1006L2.5 1003L0 1000L0 946L1.5 943L2.5 940L6.5 937L10.5 934L12.5 931L15.5 928L16.5 925L18.5 922L19.5 919L20.5 916L20.5 913L20.5 910L20.5 907L20.5 904L20.5 901L20.5 898L20.5 895L20.5 892L20.5 889L19.5 886L18.5 883L17.5 880L16.5 877L14.5 874L12.5 871L10.5 868L6.5 865L3.5 862L0 859L0 811L1.5 808L2.5 805L3.5 802L4.5 799L4.5 796L5.5 793L6.5 790L6.5 787L6.5 784L7.5 781L7.5 778L7.5 775L7.5 772L7.5 769L7.5 766L7.5 763L6.5 760L5.5 757L5.5 754L4.5 751L3.5 748L2.5 745L1.5 742L0 739V85A85 85 0 0 1 85 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 546 1182' preserveAspectRatio='none'%3E%3Cpath d='M85 0H461A85 85 0 0 1 546 85V1097A85 85 0 0 1 461 1182H85A85 85 0 0 1 0 1097L0 1090L1.5 1087L4.5 1084L9.5 1081L13.5 1078L16.5 1075L19.5 1072L21.5 1069L22.5 1066L23.5 1063L24.5 1060L24.5 1057L24.5 1054L24.5 1051L24.5 1048L23.5 1045L22.5 1042L21.5 1039L21.5 1036L19.5 1033L17.5 1030L15.5 1027L12.5 1024L9.5 1021L6.5 1018L3.5 1015L1.5 1012L2.5 1009L2.5 1006L2.5 1003L0 1000L0 946L1.5 943L2.5 940L6.5 937L10.5 934L12.5 931L15.5 928L16.5 925L18.5 922L19.5 919L20.5 916L20.5 913L20.5 910L20.5 907L20.5 904L20.5 901L20.5 898L20.5 895L20.5 892L20.5 889L19.5 886L18.5 883L17.5 880L16.5 877L14.5 874L12.5 871L10.5 868L6.5 865L3.5 862L0 859L0 811L1.5 808L2.5 805L3.5 802L4.5 799L4.5 796L5.5 793L6.5 790L6.5 787L6.5 784L7.5 781L7.5 778L7.5 775L7.5 772L7.5 769L7.5 766L7.5 763L6.5 760L5.5 757L5.5 754L4.5 751L3.5 748L2.5 745L1.5 742L0 739V85A85 85 0 0 1 85 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.lx-scope .stargo-nw-frame::after {
  content: "";
  position: absolute;
  left: 26.783%;
  top: 2.782%;
  width: 13.629%;
  height: 3.528%;
  border-radius: 999px;
  background: #000;
}

/* intelligence.html (both languages), the pink closing card (#lx-evolution):
   the STARGO WORK paragraph ran under the portrait. From 768px the text
   column is 66% of the card and the portrait an absolute box over its right
   42% (40% from 1440), later in the document, so the ends of the paragraph's
   lines were painted over wherever the photograph is opaque: 'what was
   don[e]', 'dra[wn]' (en 768), 'met th[e]', 'Change[s]' (en 991),
   'where a [person]' (en 1200-1366), 「里修正」「批复或人」 (zh 991). The logo
   and paragraph row now ends 19-32px before the portrait box at every width
   (85% of the column; 88% from 1440, where the portrait is 40%). Measured
   text right / portrait left: 421/440 at 768, 546/570 at 991, 565/589 at
   1024, 708/737 at 1280, 816/848 at 1440, both languages. The heading keeps
   its width, so its line breaks do not change; the paragraph takes a line
   or two more where it has to. Phones stack the card and are unchanged.
   The narrower row no longer holds the 43.2px 「STARGO WORK」 label (300px)
   below ~860px (265px at 768), where it split into 「STARGO」/「WORK」; the
   label stays on one line and is 2.25rem (250px) from 768 to 879. */
@media screen and (min-width: 768px) and (max-width: 1439px) {
  .lx-scope .lx-cta-wrapper .lx-cta-logo-holder { max-width: 85%; }
  .lx-scope .lx-cta-wrapper .lx-cta-logo-text { white-space: nowrap; }
}
@media screen and (min-width: 1440px) {
  .lx-scope .lx-cta-wrapper .lx-cta-logo-holder { max-width: 88%; }
}
@media screen and (min-width: 768px) and (max-width: 879px) {
  .lx-scope .lx-cta-wrapper .lx-cta-logo-text { font-size: 2.25rem; }
}
html[lang^="zh"] .lx-scope .lx-cta-wrapper .lx-cta-logo-holder .lx-text-size-regular {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* about.html, the four AI-employee tiles: the title pill under each clip.
   The donor grid is `1fr 1fr`, so the title had half the pill (88px at 320,
   164-191px at 992-1100) and the arrow the other half, and two empty donor
   slots beside the title took 16px more: "MARKET / SIGNAL / AGENT",
   "FOLLOW- / UP AGENT", 「报价 AI」/「员工」 (320), 「市场信号 AI」/「员工」
   (360-430). The title now has the pill's width less the arrow, the empty
   slots are not drawn, and the last two words of a title stay together
   (tools/blocks/cn-about-projects.mjs; `.stargo-keep` is the Chinese rule
   elsewhere in this file). The arrow keeps its place at the right end. */
.cn-about-projects .cn-case-study-content-grid { grid-template-columns: minmax(0, 1fr) auto; }
.cn-about-projects .cn-case-study-item > .cn-text-size-medium:empty { display: none; }
.cn-about-projects .cn-case-study-item .stargo-nobr { white-space: nowrap; }

/* about.html and pricing.html, the review slider: the site's focus ring
   ([tabindex]:focus-visible) lost to the donor's `outline: 0` on the arrows
   (`.cn-about-reviews .w-slider-arrow-left:focus`, 0,3,0), so a keyboard user
   tabbing to Previous / Next saw nothing change. The ring is drawn inside the
   rounded arrow. */
.cn-about-reviews .w-slider .w-slider-arrow-left:focus-visible,
.cn-about-reviews .w-slider .w-slider-arrow-right:focus-visible,
.cn-reviews .w-slider .w-slider-arrow-left:focus-visible,
.cn-reviews .w-slider .w-slider-arrow-right:focus-visible {
  outline: 2px solid #e8823a;
  outline-offset: -3px;
  border-radius: 16px;
}

/* about.html, English, the review attribution: "Trade manager · illustrative
   / scenario" left one word alone at 320-768. Balanced, the line breaks after
   the dot or not at all. */
html[lang="en"] .cn-about-reviews .cn-testimonial-info .cn-text-size-medium { text-wrap: balance; }

/* enterprise.html, the fourth story panel, (经营) / (Oversight): the
   template fades its heading and text out (IX3 t-255c7997, at 1.0 of a 1.3
   timeline) just as the sliding track lands it, so the text dissolved about
   one wheel step after it came to rest and the section then stayed pinned
   for 500-700px showing only the zooming, dimming port photograph (390, 768,
   1440, both languages). Panels 1-3 stay until the track carries them away;
   the fourth now stays too, to the end of the pinned run and while the
   section scrolls off. Only that exit fade is cancelled: it is the inline
   opacity on the heading and paragraph themselves, while the entrance
   animates their split lines, so the entrance, the slide and the
   photograph's zoom and dim are unchanged (the text shadow above keeps the
   text readable on the photograph).
   The panel headings are set at a line-height of .85 and their reveal wraps
   each line in a mask that clips, which cut the descender of "(Oversight)"
   ("Oversiqht", 390 and 1440) now that the heading stays on screen; the
   masks keep clipping, a quarter of an em outside their box. */
.sutdio-animation .studio-sticky .h2.for-abt.d04,
.sutdio-animation .studio-sticky .top-text.for-abt.t04 { opacity: 1 !important; }
.sutdio-animation .studio-sticky .h2.for-abt .gsap_split_line-mask { overflow-clip-margin: .25em; }

/* intelligence.html, English — lone last words in the display lines.
   - The gradient steps, the big line and the closing card's two lines keep
     their last two words together (tools/build-site.mjs enGlue), so balance
     breaks one word earlier: "Observe / the workflow", "not left / to
     memory.", "Keep / useful methods.", "Withdraw / ineffective changes.".
   - The joined pairs have to fit their column. The closing card's widest one,
     "ineffective changes.", is 9.14em; its column is the screen less 80px
     below 480, less 96px to 767, and 66% of the card from 768 (401px at 768,
     570 at 1024). The lines keep the template's sizes (2.3 / 3 / 3.8rem)
     wherever the pair fits and scale down with the column where it does not:
     25.5px at 320, 33px at 390, 41px at 480, 43px at 768, 52px at 900.
   - "to memory." is 5.27em, and the big line is the full screen width below
     768: 4rem from 375px (55px at 320) and 5.6rem from 507px (85px at 480),
     so the line keeps a 16px margin.
   - The six card titles in the plain-explanations grid: "Enterprise /
     knowledge", "A relationship / map" and "Long-term / memory" at 768-1279.
     Their widest title, "Enterprise knowledge", is 9.85em in a title box of
     half the screen less 106px (768-991, two columns) and a third of it less
     98px (992-1279, three columns); the titles are 2rem wherever it fits and
     follow that box where it does not (27.4px at 768, 24px at 1024), so the
     two-word titles stay on one line and the longer ones stay balanced. */
@media screen and (max-width: 479px) {
  html[lang="en"] .lx-scope .lx-cta-wrapper .lx-cta-text { font-size: min(2.3rem, calc(10.63vw - 8.5px)); }
  html[lang="en"] .lx-scope .lx-cta_wrapper .lx-big-text { font-size: min(4rem, calc(18.87vw - 6.04px)); }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  html[lang="en"] .lx-scope .lx-cta-wrapper .lx-cta-text { font-size: min(3rem, calc(10.63vw - 10.2px)); }
  html[lang="en"] .lx-scope .lx-cta_wrapper .lx-big-text { font-size: min(5.6rem, calc(18.87vw - 6.04px)); }
}
@media screen and (min-width: 768px) {
  html[lang="en"] .lx-scope .lx-cta-wrapper .lx-cta-text { font-size: min(3.8rem, calc(7.01vw - 11.26px)); }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[lang="en"] .lx-scope .lx-context-item h3 { font-size: min(2rem, calc(4.95vw - 10.6px)); }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  html[lang="en"] .lx-scope .lx-context-item h3 { font-size: min(2rem, calc(3.3vw - 9.8px)); }
}

/* intelligence.html, English, tablets — the 288-roles section's side card.
   From 768 the card grid has three columns and the card's title has a third
   of the screen less 74px (182px at 768, 267 at 1023), but its lines, as the
   copy breaks them, are up to 8.2em ("without rebuilding", 262px at 2rem): it
   read "Resume the / task / without / rebuilding / the context." at 768-900
   and "without / rebuilding" to 1023. The title is 2rem wherever its lines
   fit and follows the column below that (21.7px at 768, 27px at 900), so it
   keeps its three lines. The button under the text, "Meet the AI Workforce"
   (172px), had 158px inside its side padding at 768 and wrapped to "Meet the
   AI" / "Workforce" to about 890px; its side padding is 1rem there. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  html[lang="en"] .lx-scope .lx-team-section .lx-story-text-holder .lx-heading-style-h4 { font-size: min(2rem, calc(3.97vw - 8.8px)); }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[lang="en"] .lx-scope .lx-team-section .lx-button.lx-is-secondary { padding-left: 1rem; padding-right: 1rem; }
}

/* workforce.html — the closing block of the team scenario (text, button and
   the pink card with the orbit poster; `.lx-feature-grid` is on this page
   only). From 768 the template sets it as two equal columns and stretches the
   card to the height of the text column, while the poster is a landscape
   picture at the card's width: at 768 the card was 344x643 with a 149px
   picture at its top (422px tall in Chinese), and in its 344px column the
   English heading read "A shared goal, / connected / work and a / coherent
   result.". From 768 to 991 the block stacks as the template stacks it below
   768: the heading has the full width ("A shared goal, connected / work and
   a coherent result."), and the card, under the button, fits the poster.
   From 992 to 1279 the columns stay, and the card fits the poster and sits
   level with the middle of the text column (it was 512px tall around a
   212px picture at 992); from 1280 the two already match. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .lx-scope .lx-feature-grid:has(.lx-v6-team-title) { grid-template-columns: 1fr; }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .lx-scope .lx-feature-grid:has(.lx-v6-team-title) > .lx-feature-grid-item:has(> .lx-feature-grid-bg) { justify-content: center; }
  .lx-scope .lx-feature-grid:has(.lx-v6-team-title) .lx-feature-grid-bg { height: auto; }
}

/* enterprise.html, English — the five management component titles (see the
   balance rule above). Two of them still had no two-line split that fits:
   "Account connection" is 174px at 19.2px, wider than the 143-174px columns
   at 320-368, 480-576 and 768-776, so the title took three lines ("Account /
   connection / & protection"); the copy now says "Linked accounts &
   protection" (142px). "app management" is 152px, wider than the column at
   320-330 and 480-515 ("Capability & app / management"): there the five
   titles follow the column (18.6px at 320, 17.8px at 480) and are 1.2rem
   everywhere else, so they read "Capability & / app management". */
@media screen and (max-width: 479px) {
  html[lang^="en"] .team-grid .team-content .h2._01.sm._600.lw { font-size: min(1.2rem, calc(6.08vw - 0.9px)); }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  html[lang^="en"] .team-grid .team-content .h2._01.sm._600.lw { font-size: min(1.2rem, calc(4.05vw - 1.6px)); }
}

/* ---- V7-LX r3: the owner's own product screenshots (2026-09-18) ----------

   One slot on these pages carries one of the screenshots the owner released
   (tools/imagegen/product-assets.json). The rule does one thing —
   show a 16:9 interface whole inside the box the template already drew — and
   is matched on the picture's own folder, so the same slot filled with a
   template photograph or with this site's editorial artwork is untouched and
   keeps the fit it has today. No element, class, id, inline style, data-w-id
   or interaction binding changes, and the rule sets no width, no height, no
   position and no colour of the layout around it.
   --------------------------------------------------------------------------- */

/* L-P1. workforce.html — the wide tile beside 「不是各聊各的，而是一起做完。」
         (`.lx-feature-grid-image`, a class this template gives to one element
         on one page). The template sets `object-fit: fill` on a 552x312 box
         (1.769); the screenshot is 1268x714 (1.776), so `fill` would stretch
         it — very slightly, but stretched all the same. `contain` fits it to
         the same box and leaves under a pixel, inside the tile's own magenta
         frame (`.lx-feature-grid-bg`), which therefore needs no plate. */
.lx-feature-grid-image[src*="/stargo-product/"] { object-fit: contain; }


/* V7-LX-END */


/* V7-HOME-START (home, contact, notices, blog index fixes) */

/* H1. The 404 page's title is now its h1 (it was Mono's h2.h2). The Chinese
       heading sweep above balances `h2.h2`; the same for this one heading so
       its computed style is what it was. */
html[lang^="zh"] .utility-page-content h1.h2 { text-wrap: balance; }

/* H11. Contact page, the photo card's head row: the STARGO mark and the card's
        label. The label wrapped inside its half of the row at 768
        (「(从一条业务开/始)」) and touched the mark (「STARGO(Start with one)」
        at 768 in English). The label now keeps its one line and a 16px gap;
        where the two do not fit side by side it moves under the mark. */
.stargo-contact-page .testimonials-card .flex-btw.make-flx { flex-wrap: wrap; column-gap: 16px; row-gap: 8px; }
.stargo-contact-page .testimonials-card .flex-btw.make-flx > .top-text.for-tst { white-space: nowrap; }
/*      The quote is plain text (not split per letter); in Chinese it ended
        「…可验收的结/果。」」 at 768 and 1024. `pretty` reworks the last lines. */
html[lang^="zh"] .stargo-contact-page .testimonials-card .card-testi > .top-text.for-tst { text-wrap: pretty; }
/*      English: the quote, and the two long form labels ("What would you like AI
        to improve / first?", "What workflow do you want AI to / improve?"),
        ended on one word. */
html[lang^="en"] .stargo-contact-page .testimonials-card .card-testi > .top-text.for-tst { text-wrap: pretty; }
html[lang^="en"] .stargo-contact-page .cn-contact .cn-form-label { text-wrap: balance; }

/* H2. Homepage #loop, the small labels on the three 3D cards (ERP 与履约 /
       AI 创作 / 数字员工; "ERP & delivery" / "AI creative" / "AI teams").
       From 768px Scalora sets them at its 24px h5 inside boxes 134 and 114px
       wide, so the English labels broke ("ERP &"/"delivery", "AI"/"creative")
       and a six-character Chinese label broke before its last character. At
       Scalora's own phone size (20px, 26px leading) a label of up to six
       Chinese characters or about fourteen Latin ones holds one line; a longer
       one wraps onto two balanced lines. */
@media (min-width: 768px) {
  .sc-scope.sc-hero .hero-card-041-title {
    font-size: 20px;
    line-height: 26px;
    text-wrap: balance;
  }
}

/*     …and the card stack those labels sit on. Two things hid the lowest
       labels at every width, in both languages:
       1. The section after this band (`.section.with-minus`) is pulled up
          100px over it (white, z-index 10), so the band's last 100px are never
          seen — and the stack was drawn into them (at 390 the two lower labels
          sat 29 and 57px under that edge, at 1440 × 900 the lowest 36–97px).
          The band now carries those 100px beyond what it shows: 100px more
          bottom padding below 992, and from 992 a height of one screen plus
          100px, so the part that is seen is still exactly one screen.
       2. From 992 the stack is zoomed to the room left under the text (fix 3
          near the top of this file). That ladder was measured against a
          shorter text block than today's: re-measured at 1440 × 640–1200, the
          painted stack ends 501px + 533px × zoom below the band's top in
          Chinese. In English the heading is a line taller and the paragraph
          two lines taller (131px in all). The steps below are the same zoom
          values, each taken at the height where the stack now fits on the
          screen; English has its own. Under 899px, where English would need a
          stack under half size, it keeps half size and the band grows to hold
          it (then 124px of padding: the 100px above plus the 3D overhang).
       The motion is untouched. */
@media (max-width: 991px) {
  .sc-scope.sc-hero .hero-contant-wrapper { padding-bottom: calc(var(--_spacing---padding--padding-21xl) + 100px); }
}
@media (min-width: 992px) {
  .sc-scope.sc-hero { height: calc(100vh + 100px); min-height: 740px; }
}
@media (min-width: 992px) and (max-height: 1033px) { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .78; } }
@media (min-width: 992px) and (max-height: 916px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .66; } }
@media (min-width: 992px) and (max-height: 852px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .58; } }
@media (min-width: 992px) and (max-height: 809px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .5; } }
@media (min-width: 992px) and (max-height: 767px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .42; } }
@media (min-width: 992px) and (max-height: 724px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .34; } }
@media (min-width: 992px) and (max-height: 681px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .28; } }
@media (min-width: 992px) and (max-height: 649px)  { .sc-scope.sc-hero .hero-cards-wrapper { zoom: .22; } }
@media (min-width: 992px) and (max-height: 1164px) { html[lang^="en"] .sc-scope.sc-hero .hero-cards-wrapper { zoom: .78; } }
@media (min-width: 992px) and (max-height: 1047px) { html[lang^="en"] .sc-scope.sc-hero .hero-cards-wrapper { zoom: .66; } }
@media (min-width: 992px) and (max-height: 983px)  { html[lang^="en"] .sc-scope.sc-hero .hero-cards-wrapper { zoom: .58; } }
@media (min-width: 992px) and (max-height: 940px)  { html[lang^="en"] .sc-scope.sc-hero .hero-cards-wrapper { zoom: .5; } }
@media (min-width: 992px) and (max-height: 898px) {
  html[lang^="en"] .sc-scope.sc-hero { height: auto; }
  html[lang^="en"] .sc-scope.sc-hero .hero-contant-wrapper { padding-bottom: 124px; }
}

/* H3. Homepage #loop, English heading: the rotating last word sits in an
       80px window that shows one line of it. From 768 Scalora puts the window
       beside "Carry it through to", which left it 264px — too narrow for
       "repeat orders.", which broke in two and never showed whole — and broke
       "Carry it / through to" beside it. As Scalora itself does below 768, the
       window now takes the line under "Carry it through to", as wide as its
       longest word, each word centred in it; a word never wraps. The heading
       is three lines either way, so nothing below it moves. The Chinese
       heading (「再推进到」 plus a two-character word) fits on one line and is
       unchanged. */
html[lang^="en"] .sc-scope.sc-hero .hero-title-inner-block { flex-wrap: wrap; }
html[lang^="en"] .sc-scope.sc-hero .hero-title-changing-words-wrapper { align-items: center; }
html[lang^="en"] .sc-scope.sc-hero .hero-title-changeing-word { white-space: nowrap; }
/*     At 320 the heading lines themselves broke "Carry it through" / "to";
       balanced: "Carry it" / "through to". */
html[lang^="en"] .sc-scope.sc-hero .hero-title-block h2 { text-wrap: balance; }

/* H4. Homepage, 288 section, dark card: the label (「(按任务组队)」 /
       "(Teams by task)") and the avatar row. Below 992px Mono pins the two,
       stacked, 20px from the card's bottom-right corner, and the label landed
       on the last text line (「十类企业职能」 / "ten enterprise functions") at
       320–991. Below 992 they now share one row, label right-aligned before
       the avatars (40px tall instead of 76):
         - 768–991, where the card's height is fixed by the grid, the row stays
           pinned to the corner and clears the text by 26px or more (a label
           up to twice today's length wraps onto two lines);
         - up to 767, where the card is as tall as its content, the row joins
           the flow under the text (16px below it, 20px above the card's
           edge), so no label length can reach the text; a label too long for
           the row goes on its own line above the avatars.
       From 992 the pair sits top-right beside the big 288; its width is capped
       so a longer label wraps rather than running over the number. Layout
       only: the label is copy and may change length. */
@media (min-width: 992px) {
  .card-half._01 .team-circle { max-width: calc(100% - 251px); }
}
@media (max-width: 991px) {
  .card-half._01 .team-circle {
    left: 15px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-gap: 12px;
    row-gap: 8px;
  }
  .card-half._01 .team-circle > .top-text { min-width: 0; text-align: right; text-wrap: balance; }
  .card-half._01 .team-circle > .team-flex { flex: none; }
}
@media (max-width: 767px) {
  .card-half._01 { padding-bottom: 20px; }
  .card-half._01 .team-circle { position: relative; inset: auto; margin-top: 16px; flex-wrap: wrap; }
}

/* H5. Homepage captions.
   - The row captions are plain text in the first of four grid columns. In
     Chinese, `keep-all` lets a caption break only at its spaces, so
     「(288 个数字岗位 · 非同时运行)」 breaks after 「·」 at 768 (it broke
     「非同时/运行」) and 「(四个示例场景 · 非客户评价)」 after 「·」 at
     1024–1440 (「非/客户评价」, 「非客户/评价」). `min-width: 0` keeps the
     grid's equal columns from growing to the unbroken phrase.
   - Below 480 the first column is 69–86px. The five-stages caption spills into
     the second column (its dot moves to that column's end) so it reads on one
     line in Chinese (「(五个业务/阶段)」 before) and on two in English
     ("(Five/business/stages)" before); the FAQ caption does the same
     (「(常见问/题)」 at 320) with the row's three dots each centred in their
     columns, still evenly spaced. */
html[lang^="zh"] body:has(#loop) section.with-minus .bottom-grid > p.top-text:first-child,
html[lang^="zh"] .testimonials-section .testimonials-width > div > p.top-text {
  word-break: keep-all;
}
html[lang^="zh"] body:has(#loop) section.with-minus .bottom-grid > p.top-text:first-child,
html[lang^="zh"] .testimonials-section .testimonials-width > div:has(> p.top-text) {
  min-width: 0;
}
@media (max-width: 479px) {
  body:has(#loop) section:has(.service-title) .bottom-grid.grd > p.top-text:first-child,
  html[lang^="zh"] #compare .bottom-grid.mw.grd > p.top-text {
    margin-right: calc(-100% - 10px + 28px);
    min-width: 0;
    text-wrap: balance;
  }
  body:has(#loop) section:has(.service-title) .bottom-grid.grd > .circle-divider { justify-self: end; }
  html[lang^="zh"] #compare .bottom-grid.mw.grd > .circle-divider { justify-self: center; }
}

/* H6. Homepage, English display headings: one word ("context.", "work")
       ended the channel band and the phone products heading, and the 288
       heading broke "Across / the enterprise." Balanced lines, and the channel
       heading's box is 40px wider from 768, so "Different channels," /
       "one business context." fits its two lines (the second is 463px in a
       458px box). Layout only; the words may change. */
html[lang^="en"] .sc-scope.integration .integration-title-block h2,
html[lang^="en"] .sc-scope.products .products-title-block h2,
html[lang^="en"] body:has(#loop) section.with-minus h2.h2:not(.card-half h2) {
  text-wrap: balance;
}
@media (min-width: 768px) {
  html[lang^="en"] .sc-scope.integration .integration-title-block { margin-inline: -20px; }
}

/* H7. Homepage, Chinese.
   - The sticky problem heading sits in a column three characters wide from
     768 to 1439px and broke 「工具很/多，靠/人连接」. The copy marks the word
     boundaries (<wbr>) and `keep-all` breaks only there (and after 「，」):
     「工具/很多，/靠人/连接」 — one word a line, as the English heading has.
   - The pricing heading broke 「从企业需要/的 AI 层级开始。」 at every width;
     with `keep-all` it breaks at its spaces: 「从企业需要的/AI 层级开始。」. */
html[lang^="zh"] section.gr h2.h2,
html[lang^="zh"] section.drk h2.h2.for-stats {
  word-break: keep-all;
}

/* H17. Footer statement, English: the second sentence ("Delegate the work.
        Keep the authority.") left "authority." alone at 320. It is its own
        balanced block now; the statement above it keeps its forced break. */
html[lang^="en"] .footer-part-1 h2.h2 > span { display: block; text-wrap: balance; }

/* H19. Homepage sweep: short texts that ended on one word or one character.
   - English: section captions, the scenario speakers, the chat bubbles, the
     product tab names, the FAQ questions, the article titles and the pricing
     heading are balanced ("(The problem was never a missing / tool)",
     "(288 AI roles · not concurrent / runs)", "Needs an authorized /
     reviewer", "AI Creative · Images & / video", "…“288 digital employees” /
     mean?", "From inquiry to quote, without starting in / Excel", "One
     system. The / right level of / support."), and so are the short quotes and
     plan lines of the flip cards and scenarios ("…approvals and /
     acceptance.”", "…self-service lead / discovery."), where `pretty` left
     the last word alone. Longer running text (the product descriptions, the
     comparison lines) takes `pretty`.
   - Chinese: the pricing flip cards' quotes and labels and the Enterprise
     quote (「…带动增/长。」」, 「…对外工/作。」」, 「…审/批」, 「…私有化部/署。」」)
     take `pretty`; the article titles break only at their punctuation and
     spaces, balanced (「…的正确顺/序」 → 「从一条流程开始：」/「企业引入 AI
     的正确顺序」). */
html[lang^="en"] body:has(#loop) :is(.bottom-grid > p.top-text:first-child, section.gr p.top-text, .testimonials-section p.top-text, .team-circle p.top-text, .caption-text, .p-chat, .products-card-name-block .heading-style-h5, .products-cards-dashboard-block .heading-style-h4, .faq-wrapper .toggle-header, .blog-txt, section.drk h2.h2.for-stats, .top-text.for-tst, .top-text.for-sst, p.p-max, p.top-text._05) {
  text-wrap: balance;
}
html[lang^="en"] body:has(#loop) :is(.paragraph-p1, p.p-no-bottom, #compare p.top-text, #compare h2.h2._01.sm._600) {
  text-wrap: pretty;
}
html[lang^="zh"] body:has(#loop) :is(.top-text.for-tst.sts, .top-text.for-sst, .sc-scope.integration .integration-info-block div, .paragraph-p1) {
  text-wrap: pretty;
}
html[lang^="zh"] body:has(#loop) .blog-txt {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* H8. Homepage demo band, Chinese heading 「预约企业演示。」: with its Chinese
       full stop (tools/chrome.mjs) it is seven full-width characters, 280px
       at 40px, and below 340px the card holds 257 — it broke 「预约企/业演示。」.
       It keeps one line: the size steps down with the card there (35.7px at
       320) and the phrase is never broken inside. */
html[lang^="zh"] body:has(#loop) section.ctc h2.h2.for-ctn {
  font-size: min(40px, calc((100vw - 70px) / 7));
  word-break: keep-all;
}
/*     The band's legal line (home, capabilities, enterprise) ends with the two
       link texts and 「。」; the line broke inside 「隐私政策」 at 340–390. The
       link texts keep one line each. */
html[lang^="zh"] section.ctc .legal-link { white-space: nowrap; }

/* H16. Notices page, the "Keep reading" band.
   - The three card sentences are plain text. In Chinese they broke inside
     words (「创/作」, 「岗/位」, 「目/录」, 「结/果」); `keep-all` breaks them
     only at punctuation and spaces (`anywhere` is the fallback for a phrase
     longer than the card, and keeps the cards' sizes as they are).
   - In English the side sentence and the card sentences left one word on
     their last line ("managed.", "workflow.", "improvement."); they are
     three or four lines long, and balanced lines end none of them on one
     word. (The Chinese side sentence is split per letter; a break in its
     copy keeps 「做什么」 and 「谁来做」 whole.)
   The notice text above the band is not touched. */
html[lang^="zh"] .blog-text-wrp .margin-10 p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[lang^="en"] .blog-text-wrp .margin-10 p,
html[lang^="en"] .max-lft-dvc p.top-text.big {
  text-wrap: balance;
}

/* H18/H19. Pricing page, layout only (no price, plan or word changes).
   - The tiers band's head: renok sets the heading beside a 35% column holding
     the paragraph and the first-year / renewal switch. With this page's
     longer heading that column was 163px at 768 and 170px at 390, so the
     heading ran five lines in English and the switch labels broke
     ("First-/year/total", 「首年价/格」, 「续/费」). Below 992 the two now
     stack, as renok already does under 360; the switch labels never wrap.
     The heading is balanced, and in Chinese breaks only at its comma
     (「从需要解决的业务，」/「确定合适的配置与服务。」; it left 「务。」 alone at
     768 and 1024).
   - In the tier cards the price unit broke into three lines beside the price
     at 1024 ("/ first / year / total", 「/ 首 / 年」); it keeps one line and
     moves under the price when the two do not fit. The tick icons of long
     feature lines were squeezed smaller than the others (renok's and
     cinery's lists alike); they keep their size.
   - Short card texts and the review quotes left one character or word on
     their last line (「资/料」, 「培训一/次」, 「核/对。」」, "SKUs",
     "session", "need."); `pretty` (the English review quotes are balanced:
     their last line was "up.”" or a lone "follow-up.”"). The FAQ
     questions left a word or a character alone ("year?", 「始？」); balanced. */
@media (max-width: 479px) {
  .rk-price-tiers .rk-rt-pricing-v1-top { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 480px) and (max-width: 991px) {
  .rk-price-tiers .rk-rt-pricing-v1-top { flex-direction: column; align-items: flex-start; }
  .rk-price-tiers .rk-rt-pricing-top-right { flex: none; max-width: 34.6875rem; }
}
.rk-price-tiers h1.rk-rt-gap-off { text-wrap: balance; }
html[lang^="zh"] .rk-price-tiers h1.rk-rt-gap-off { word-break: keep-all; }
.rk-price-tiers .rk-rt-monthly,
.rk-price-tiers .rk-rt-yearly { white-space: nowrap; }
.rk-price-tiers .rk-rt-card-price { flex-wrap: wrap; }
.rk-price-tiers .rk-rt-price-yearly-box > div { white-space: nowrap; }
.rk-price-tiers .rk-rt-pricing-list-items > div:first-child,
.cn-price-card .cn-check-icon { flex: none; }
.rk-price-tiers .rk-rt-text-color-premium-grey,
.rk-price-tiers .rk-rt-pricing-top-right > .rk-rt-text-color-light-gray,
.rk-price-compare .rk-rt-text-color-premium-grey,
.cn-price-card .cn-text-size-regular,
html[lang^="zh"] .cn-reviews p.cn-text-size-large {
  text-wrap: pretty;
}
html[lang^="en"] .cn-reviews p.cn-text-size-large { text-wrap: balance; }
.sc-page .faq .heading-style-h6 { text-wrap: balance; }

/* H12/H13. Contact page on phones.
   - The form card sat 16px inside the column (`.form-amin`'s padding-inline,
     written for the white Mono form this card replaced), so the stacked form
     was 32px narrower than the photo card above it and its fields lost the
     same width (225px at 320). The card now spans the column like the photo
     card; its own 24px padding keeps the fields off its edge.
   - The message box is 2 rows plus cinery's 32px/64px padding (138px). The
     English example text runs to five lines at 320 and reached the bottom
     border. 200px gives the five lines the box's own bottom padding back. */
@media (max-width: 767px) {
  .stargo-contact-page .form-amin { padding-inline: 0; }
  .stargo-contact-page .cn-contact .cn-form-input.cn-is-text-area { min-height: 200px; }
}

/* ---- V7-HOME round 2 ---------------------------------------------------- */

/* H20. Chinese phrases kept whole in two headings the reveal splits into one
        box per character (so `word-break` cannot reach them):
   - the homepage's (从哪里开始？) heading, whose words the builder wraps in
     `.zh-keep` (it broke 「订/单交付」 at 768–1440 and 「交/付」 at 390);
   - the footer's newsletter heading on every Chinese page, three phrases
     (tools/copy.mjs CHROME): it broke 「产品进展第一 / 时间通知你。」 at
     768–940. It stays on one line where it fits and otherwise breaks between
     phrases. */
html[lang^="zh"] :is(#compare, .footer) .zh-keep { white-space: nowrap; }

/* H21. The desktop side menu's two buttons (tools/chrome.mjs sideMenu,
        js/stargo-side-menu.js) show the site's focus ring from the keyboard.
        The menu icon is a 45×12 pair of lines, so the ring stands off it. */
.last-part .circle-wrap[role="button"] { cursor: pointer; }
.last-part .circle-wrap[role="button"]:focus-visible { outline-offset: 10px; border-radius: 4px; }
.fixed-close-button[role="button"]:focus-visible { outline-offset: 4px; border-radius: 50%; }

/*      The 404 page's header is Mono's `.absolute-element`, not the
        `.navigation-top` every other page has, so the header fixes near the top
        of this file ("Navigation labels", "Top navigation: nine items") never
        reached it: the English labels were squeezed into the template's
        four equal columns and clipped at their left edge ("ntelligence",
        "apabilities") at 1280–1920. The same rules, for that wrapper. */
@media (min-width: 992px) {
  .absolute-element > .navbar .nav-menu.first .button-link { flex-shrink: 0; }
  .absolute-element > .navbar { grid-template-columns: 1fr auto 1fr; }
  .absolute-element > .navbar > .make-grid { grid-column: 2 / 3; width: max-content; }
  .absolute-element > .navbar > .last-part { grid-column: 3 / 4; }
  .absolute-element > .navbar > .make-grid > .nav-menu.first { width: max-content; justify-content: center; }
}
@media (min-width: 992px) and (max-width: 1439px) {
  html[lang="en"] .absolute-element > .navbar .nav-menu.first { grid-column-gap: 10px; }
  html[lang="en"] .absolute-element > .navbar .navigation-text-main { font-size: 15px; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  html[lang="en"] .absolute-element > .navbar .nav-menu.first { grid-column-gap: 8px; }
  html[lang="en"] .absolute-element > .navbar .navigation-text-main { font-size: 14px; }
}

/*      …and its footer tagline. Below 992px Mono lets the 404 block shrink to
        its content, so on a tall phone (390×844, 430×932) the footer began
        above the middle of the screen and the tagline's reveal, which starts
        when its top passes the middle, never started: its letters stayed at
        opacity 0. The block keeps at least one screen, as it does from 992
        (the template's own 100vh), so the footer arrives by scrolling. */
@media (max-width: 991px) {
  .utility-page-wrap { min-height: 100vh; min-height: 100svh; }
}

/* H22. Pricing page, Chinese.
   - FAQ questions: the builder marks their word boundaries (<wbr>) and they
     break only there — 「模型费用包/含在内吗？」 and 「多品/牌怎么办？」 split
     words at 320.
   - The struck-through 「按工具计价」 in the 288 AI 员工 card was squeezed to
     「按工/具计/价」 beside ¥10,000 at 320: it keeps one line and moves above
     the price where the two do not fit side by side, and 「/ 年」 keeps one line.
   - The footer's consent note is `pretty` like on every other Chinese page
     (rule "3. Chinese orphans" leaves this page out for its plan cards); it
     ended 「…处理你的申/请。」 at 1024–1920. */
html[lang^="zh"] .sc-page .faq .heading-style-h6 { word-break: keep-all; }
.cn-price-card .cn-price-block { flex-wrap: wrap; }
.cn-price-card .cn-price-block > .cn-price-text,
.cn-price-card .cn-price-wrap > .cn-text-size-small { white-space: nowrap; }
html[lang^="zh"] .stargo-form-consent { text-wrap: pretty; }

/*      English FAQ questions ended on one word below 340px ("…/ unlimited?",
        "…/ available?", "…/ done?"): the question column was 170px. The list's
        own inset goes there, so the cards line up with the heading above
        them and the column is 194px, as wide as at 340. */
@media (max-width: 339px) {
  .sc-page .faq .faq-list-wrapper { padding-inline: 0; }
}

/* H23. Pricing comparison table, Chinese: labels and values break only at the
        word marks the block writes (tools/blocks/rk-price-compare.mjs) and at
        their spaces — 「中英文 + 3 个语/种」, 「云端工作/台」, 「个标/准」,
        「企业知/识」 split words at every width. `anywhere` is only the belt for
        a word longer than its track. The plan names in the header row are
        centred in their tag, so "Global / Acquisition" on two lines (480–990)
        sits under its tag as the one-line names do. */
html[lang^="zh"] .rk-price-compare .rk-rt-chart-left-col .rk-rt-text-color-premium-grey,
html[lang^="zh"] .rk-price-compare .rk-rt-chart-columns > .w-layout-hflex {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rk-price-compare .rk-rt-chart-top-tag .rk-rt-text-style-h6 { text-align: center; }

/* H24. Homepage #loop, Chinese: the rotating word (「报价。」「履约。」「复购。」)
        showed a space between its two characters (12px at 1440): the reveal
        splits it twice and leaves a space between the pieces. As a flex row
        the word lays its pieces side by side and draws no space between them;
        its size and the rotation are unchanged. */
html[lang^="zh"] .sc-scope.sc-hero .hero-title-changeing-word { display: flex; }

/* H25. Homepage, English.
   - "Discuss your workflow" in the five-stages row wrapped ("Discuss your /
     workflow", one word a line at 480–580) in its one-column cell. From 480
     to 991 the button takes the row's last two columns, set to their right
     edge (clear of the dot in the third); below 480 it takes its own line
     under the caption. The Chinese button keeps its row below 480, where it
     fits.
   - The demo band's "Request a Demo." broke "Request a / Demo." below 375 and
     the journey title "Understand / needs." at 320: both step down with the
     screen there, as the Chinese demo heading does (H8), and keep one line.
   - The side menu's legal links and the "Request a Demo" link under
     (Where to start?) are written in sentence case; Mono capitalised every
     word ("Request A Demo", "Terms Of Use"). They read as written. */
/*   (r2) Both stay in the row's first line: the button's cell is the last two
     columns of row 1 and the second dot keeps its own cell, the third column
     of row 1, under the button's empty left part (a spanning button alone had
     pushed the dot to a second line at 480–767 and the button itself below
     the row at 768–991). The dots sit where the template puts them. */
@media (min-width: 480px) and (max-width: 991px) {
  body:has(#loop) .bottom-grid._1.grd > #w-node-_834d27be-a307-1552-5d45-d5d881496a66-993a4bf1 {
    grid-area: 1 / 3 / 2 / 5;
    justify-self: end;
  }
  body:has(#loop) .bottom-grid._1.grd > .circle-divider.hide-crc { grid-area: 1 / 3 / 2 / 4; }
}
@media (max-width: 479px) {
  html[lang^="en"] body:has(#loop) .bottom-grid._1.grd > #w-node-_834d27be-a307-1552-5d45-d5d881496a66-993a4bf1 {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
    justify-self: start;
  }
}
html[lang^="en"] body:has(#loop) section.ctc h2.h2.for-ctn { font-size: min(40px, calc((100vw - 70px) / 7.7)); }
html[lang^="en"] body:has(#loop) .animation-section .cta-sm-title { font-size: min(var(--button--cta-title), calc((100vw - 16px) / 9)); }
html[lang^="en"] .button-text.w-variant-83ed8c83-4d97-b61d-2146-78e915c17bb4 { text-transform: none; }

/* H26. Notices, English: the (Keep reading) subtitle broke the brand name
        ("…what STARGO / WORK does", 390–1920 except 1024). Its line reveal
        re-splits the text on every space, a no-break space included, so the
        name is a `.sgp-nobr` span (tools/copy.mjs NOTICES.relatedIntro),
        which the split leaves whole (js/stargo-splittext-cjk.js), set on one
        line here. */
.max-lft-dvc p.top-text.big .sgp-nobr { white-space: nowrap; }

/* H27. The 404 page's header menu button (tools/chrome.mjs overlayMenu keeps
        it; the side-menu icon with nothing behind it is gone). Below 992px it
        is drawn as on every other page ("Audit fixes" near the top of this
        file, written for `.navigation-top`): a 44px light tile with the
        template's white icon turned dark, so it shows on the white page. */
@media (max-width: 991px) {
  .absolute-element > .navbar .menu-button,
  .absolute-element > .navbar .menu-button.w--open { background: #f4f4f4; min-width: 44px; min-height: 44px; }
  .absolute-element > .navbar .menu-button .lottie-white { filter: invert(1); }
}

/* H28. Pricing comparison table, 768–991: the price row on the header's
        tracks. `1fr` floors at a cell's min-content, and a price cell's is its
        h2 plus 20px of padding: ¥40,000 at 30px is 111px of text in a 99px
        column at 768, so the price row alone widened its plan tracks and
        lined up with nothing (its plan tracks started up to 47px off in
        English and 24px in Chinese at 768, closing by 860;
        rk-price-compare.css section 3). Every row
        now draws the same six tracks, which cannot be pushed by content, and
        the price keeps renok's size wherever it fits and steps down with the
        column where it does not (¥40,000 is 3.705em wide; 3.8em leaves a
        margin), measured against the cell itself. Nothing is clipped and no
        text changes. */
@media (min-width: 768px) and (max-width: 991px) {
  .rk-price-compare .rk-rt-pricing-chart-rows { grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); }
  .rk-price-compare .rk-rt-chart-columns.rk-rt-chart-col-1 { container-type: inline-size; }
  .rk-price-compare .rk-rt-pricing-chart-price h2 { font-size: min(var(--_font-details---font-size--heading-two), 100cqi / 3.8); }
}

/* H29. The four business stages that show one of the owner's own product
        screenshots (tools/build-site.mjs, the `scenes` list): (001) 主动获客 /
        "Discover" carries the Growth OS home (a clean capture with demo data,
        about 2:1), (002) 外贸销售 / "Trade sales" carries the Sales Desk case
        and (003) 企业履约 / "Fulfilment" the ERP item list, both clean
        captures cut to the card's 3:2, and (005) 复购与改进 / "Retain &
        improve" carries the curated workspace home. The Growth OS home and
        gos11 name their own plate below (the screenshot's own edge); the other
        screens keep #dfeafe.

        The card is Mono's `.image-wrap.for-service`, `aspect-ratio: 3 / 2`, and
        the screenshots are 16:9. Mono's `.paralax-image` is `object-fit: cover`,
        which across that pair of ratios keeps the height and takes a fifth off
        the width — 82px of a 416px picture at 1440, which is the left
        navigation rail and the right-hand panel. So these are fitted rather
        than cropped: the whole interface, on a plate, inside the card Mono drew.
        (004) 回款与服务 keeps the photograph-like concept illustration `cover`
        was written for, and the rule is keyed on the file's own folder, so a
        slot that goes back to an illustration goes back to `cover` with it.

        `height: 100%` replaces the donor's 105%. That over-scan exists for
        Mono's "Main Image Parallax 10%" (ix2 `a-215`), which moves
        `.paralax-image` down by a tenth of its height as the page scrolls;
        measured on the built page at 1440, sampled every 300px down the whole
        document, all five of these stay at `transform: none` — that interaction
        is bound to the blog and work cards, not to the service list. With no
        translate to hide, 105% only held the picture 11px off centre inside a
        box that clips it.

        The pale screens share #dfeafe, sampled from their own edges. The
        Growth OS home overrides it with #f4f6fa and gos11 with #072c6d, the
        edge of each of those stills. The letterbox reads as more of the picture rather than as a bar,
        and the card keeps Mono's 10px radius and its own `overflow: hidden`. */
body:has(#loop) .image-wrap.for-service .paralax-image[src*="assets/stargo-product/"] {
  height: 100%;
  object-fit: contain;
  background-color: #dfeafe;
}
/* Screens whose edge is not #dfeafe (the Growth OS home's page ground, the
   workspace home's dark chrome). The letterbox has to be the picture's own
   edge or the plate reads as a bar. */
body:has(#loop) .image-wrap.for-service .paralax-image[src*="live05-growth-home-2x1"] {
  background-color: #f4f6fa;
}
body:has(#loop) .image-wrap.for-service .paralax-image[src*="gos11-dormant-reactivation"] {
  background-color: #072c6d;
}

/* V7-HOME-END */