/* Chinese page layout, with scoped English text flow and diagram fit corrections. */
/* English descriptions and complete inner boards determine the Skill panel height. */
html[lang="en"] .service-detail-skill .service-skill-panel {
  height: auto;
  min-height: 620px;
  grid-template-rows: auto auto;
}
html[lang="en"] .service-detail-skill .service-skill-flow { height: auto; align-items: stretch; }
html[lang="en"] .service-detail-skill .service-skill-flow > .skill-flow-card {
  height: auto;
  min-height: 0;
  grid-template-rows: 22px 58px minmax(104px, 1fr) 342px;
  gap: 10px;
  padding: 12px 10px;
}
html[lang="en"] .service-detail-skill .service-skill-flow > .skill-flow-card > strong {
  font-size: 24px; line-height: 1.15; min-height: 0; margin: 0;
}
html[lang="en"] .service-detail-skill .service-skill-flow > .skill-flow-card > p {
  margin: 0; min-height: 0; font-size: 13px; line-height: 1.45;
}
html[lang="en"] .service-detail-skill .skill-flow-visual { height: 342px; min-height: 342px; max-height: none; }
html[lang="en"] .service-detail-skill .skill-flow-visual :is(span,b,strong,em,p) { white-space: normal; }
html[lang="en"] .service-detail-skill .benchmark-consult-output span { font-size: 11px; line-height: 1.2; }
html[lang="en"] .service-detail-skill .skill-standard-head span,
html[lang="en"] .service-detail-skill .agent-execute-head span { font-size: 11px; line-height: 1.2; }
/* Override the original diagram's fixed !important label size on its narrow footer chips. */
html[lang="en"] .service-detail-skill :is(.skill-standard-footer,.agent-execute-check) span { min-width: 0; font-size: 11px !important; line-height: 1.2; }

/* Preserve the four lanes and connector paths; fit each label inside its node. */
html[lang="en"] #workflow .implementation-lane { container-type: inline-size; grid-template-rows: 120px minmax(0,1fr); padding-bottom: 66px; }
html[lang="en"] #workflow .implementation-lane-head strong { font-size: clamp(22px, 11cqi, 32px); line-height: 1.12; }
html[lang="en"] #workflow .implementation-lane-head > span { max-width: 100%; padding: 7px 12px; font-size: clamp(11px, 5.4cqi, 15px); line-height: 1.25; }
html[lang="en"] #workflow .implementation-process-list b {
  padding: 10px 4px;
  font-size: clamp(11px, 5.4cqi, 14px);
  line-height: 1.2;
  white-space: normal;
}
html[lang="en"] #workflow .implementation-app-functions > span {
  min-height: 38px;
  padding: 4px 6px;
  font-size: clamp(11px, 4.9cqi, 13px);
  line-height: 1.2;
  white-space: normal;
}
html[lang="en"] #workflow .implementation-app-functions > span:nth-child(2) { --link-height: 108px; }
html[lang="en"] #workflow .implementation-app-functions > span:nth-child(3) { --link-height: 156px; }
html[lang="en"] #workflow .implementation-app-functions > span:nth-child(4) { --link-height: 204px; }
html[lang="en"] #workflow .implementation-lane:not(:last-of-type)::after { top: 216px; }
@media (min-width: 761px) and (max-width: 1280px) {
  /* Keep four steps together when the side-by-side text column leaves too little room. */
  html[lang="en"] .service-detail-skill { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 761px) and (max-width: 960px) {
  /* Keep the same four steps in order, without shrinking English labels below readable sizes. */
  html[lang="en"] .service-detail-skill .service-skill-flow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  html[lang="en"] .service-detail-skill .service-skill-panel { min-height: 0; }
  html[lang="en"] .service-detail-skill .service-skill-flow > .skill-flow-card { grid-template-rows: auto auto auto auto; padding: 14px; }
  html[lang="en"] .service-detail-skill .service-skill-flow > .skill-flow-card > p { font-size: 14px; }
  html[lang="en"] #workflow .implementation-lane { grid-template-rows: auto minmax(0,1fr); }
}

html[lang="en"] .en-secondary-line { display: block; }
html[lang="en"] .en-secondary-mobile { display: none; }
html[lang="en"] :is(.section-title, .display-title):has(.en-secondary-line) {
  text-wrap: initial;
}
html[lang="en"] :is(.section-lede, .hero-lede):has(.en-secondary-desktop) {
  text-wrap: initial;
}
@media (max-width: 760px) {
  html[lang="en"] body :is(.hero-lede, .section-lede) > .en-secondary-desktop { display: none; }
  html[lang="en"] body :is(.hero-lede, .section-lede) > .en-secondary-mobile { display: inline; }
}

/* Keep the Chinese hero diagram's cards and grid; fit English inside each card. */
html[lang="en"] .service-page .service-method-source {
  gap: 5px;
  padding: 12px 14px;
}
html[lang="en"] .service-page .service-method-source small {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.1;
}
html[lang="en"] .service-page .service-method-source strong {
  font-size: 17px;
  line-height: 1.12;
}
html[lang="en"] .service-page .service-method-source span {
  font-size: 12px;
  line-height: 1.25;
}
html[lang="en"] .service-page .service-method-core {
  gap: 5px;
  padding: 14px 18px;
}
html[lang="en"] .service-page .service-method-core strong {
  font-size: 24px;
  line-height: 1.08;
}
html[lang="en"] .service-page .service-method-core span {
  font-size: 12px;
  line-height: 1.25;
}

/* Size the graphic from the space left after the heading, with equal outer padding. */
html[lang="en"] .service-page .service-result-stack article {
  container: service-result / inline-size;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 14px;
}
html[lang="en"] .service-page .service-result-copy small { min-height: 20px; }
html[lang="en"] .service-page .service-result-copy strong {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.05;
}
html[lang="en"] .service-page .service-result-graphic {
  height: 100%;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}
html[lang="en"] .service-page .skill-callable {
  width: 60px;
  height: 60px;
  box-shadow: 0 0 0 7px rgba(211, 138, 49, .22);
}
html[lang="en"] .service-page :is(.skill-callable, .review-skill-call) {
  grid-template-rows: auto auto;
  gap: 2px;
}
html[lang="en"] .service-page .agent-token {
  grid-template-rows: 24px 15px 14px;
  gap: 2px;
}
html[lang="en"] .service-page .agent-token::before { margin-bottom: 0; }
/* At narrow column widths, shrink the inner diagram instead of cropping it. */
@container service-result (max-width: 250px) {
  html[lang="en"] .service-page .service-result-copy strong {
    font-size: clamp(16px, 8cqi, 19px);
  }
  html[lang="en"] .service-page .service-result-skill .service-result-graphic {
    grid-template-columns: minmax(0, 126px) 10px 52px;
    gap: 4px;
  }
  html[lang="en"] .service-page .service-result-skill .service-result-graphic > i { width: 10px; }
  html[lang="en"] .service-page .skill-callable { width: 50px; height: 50px; }
  html[lang="en"] .service-page .skill-source-list span { font-size: 11px; padding: 0 2px; }
  html[lang="en"] .service-page .service-result-app .service-result-graphic {
    grid-template-columns: 48px minmax(0, 150px);
    gap: 5px;
  }
  html[lang="en"] .service-page .agent-token { width: 48px; }
  html[lang="en"] .service-page .app-interface { padding: 5px; gap: 4px; }
  html[lang="en"] .service-page .app-interface span { font-size: 10px; padding: 0; }
  html[lang="en"] .service-page .service-result-review .service-result-graphic {
    grid-template-columns: minmax(0, 136px) 20px 48px;
    gap: 4px;
  }
  html[lang="en"] .service-page .review-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  html[lang="en"] .service-page .review-signal-grid span { font-size: 10px; padding: 0 1px; }
  html[lang="en"] .service-page .review-check { width: 20px; height: 20px; border-width: 4px; }
  html[lang="en"] .service-page .review-check i { width: 9px; height: 6px; border-width: 3px; }
  html[lang="en"] .service-page .review-skill-call { width: 48px; }
  html[lang="en"] .service-page :is(.review-skill-call, .skill-callable) b { font-size: 12px; }
  html[lang="en"] .service-page :is(.review-skill-call, .skill-callable, .agent-token) span { font-size: 10px; }
}
@media (max-width: 1180px) {
  html[lang="en"] .service-page .service-result-stack article {
    grid-template-rows: auto 92px;
  }
}
@media (min-width: 821px) and (max-width: 1180px) {
  html[lang="en"] .service-page .service-stage-top {
    position: static;
    grid-column: 1;
    margin-bottom: 10px;
  }
  html[lang="en"] .service-page .service-result-stack {
    grid-template-rows: auto;
  }
}
@media (max-width: 760px) {
  html[lang="en"] .service-page .service-method-source {
    padding: 13px;
  }
  html[lang="en"] .service-page .service-method-source strong { font-size: 16px; }
  html[lang="en"] .service-page .service-method-core strong { font-size: 18px; }
}