/* Latin-layout corrections.
   The Chinese page keeps its original geometry; English, French and German
   share these wrapping and breathing-room rules for their longer labels. */

html[lang="en"] {
  overflow-x: clip;
}

/* Case cards: the Chinese key column was intentionally compact. */
html[lang="en"] .card__row {
  align-items: flex-start;
  gap: 12px;
}

html[lang="en"] .card__row .k {
  flex: 0 0 82px;
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: .08em;
  line-height: 1.35;
}

html[lang="en"] .card__row .v {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The diagram is an SVG with fixed cells, so long labels need a slightly
   smaller, calmer setting rather than spilling over a neighboring cell. */
html[lang="en"] .enclave .lyr-t {
  font-size: 8.7px;
  letter-spacing: .11em;
}

html[lang="en"] .enclave .lyr-d {
  font-size: 7.9px;
  letter-spacing: 0;
}

html[lang="en"] .archviz .a-bt {
  font-size: 12px;
}

html[lang="en"] .archviz .a-ct {
  font-size: 9.8px;
}

html[lang="en"] .archviz .a-cd {
  font-size: 8.1px;
  letter-spacing: 0;
}

html[lang="en"] .archviz .a-st {
  font-size: 8.7px;
}

html[lang="en"] .archviz .a-ht {
  font-size: 10.8px;
}

html[lang="en"] .archviz .a-hd {
  font-size: 8.1px;
}

/* On a phone, a fixed 1080-unit systems diagram becomes a horizontal
   viewport with unreadably small text. Use a complete, stacked summary so
   every label remains visible without asking the reader to pan a canvas. */
.arch-mobile {
  display: none;
}

.arch-mobile__band,
.arch-mobile__aside {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(20, 22, 26, .58);
  overflow: hidden;
}

.arch-mobile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line-faint);
}

.arch-mobile__title {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

.arch-mobile__code {
  flex: 0 0 auto;
  color: var(--cyan-dim);
  font: 500 8px/1.2 var(--mono);
  letter-spacing: .14em;
}

.arch-mobile__cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-faint);
}

.arch-mobile__cell {
  min-width: 0;
  padding: 15px 14px 16px;
  background: rgba(10, 10, 10, .56);
}

.arch-mobile__cell:nth-child(3) {
  grid-column: 1 / -1;
}

.arch-mobile__cell b,
.arch-mobile__human b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.arch-mobile__cell span,
.arch-mobile__human span {
  display: block;
  margin-top: 7px;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.arch-mobile__aside {
  padding: 17px;
}

.arch-mobile__aside h3 {
  margin-bottom: 12px;
  color: var(--cyan-dim);
  font: 500 9px/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.arch-mobile__aside-item {
  padding: 11px 0;
  border-top: 1px solid var(--line-faint);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.arch-mobile__human {
  margin-top: 12px;
  padding: 14px 15px;
  border-left: 2px solid var(--amber);
  background: rgba(217, 164, 65, .07);
}

/* Capability bullets should wrap as editorial text, not as a fixed label
   followed by an English sentence forced onto the same line. */
html[lang="en"] .pillar__list li {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

html[lang="en"] .pillar__list li b {
  white-space: normal;
}

/* Give the English CTA a deliberate two-line measure at desktop widths. */
html[lang="en"] .cta__in {
  max-width: 920px;
}

html[lang="en"] .cta h2 {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.12;
}

html[lang="en"] .cta p {
  max-width: 760px;
  margin-inline: auto;
}

/* The simulator has two grid children whose English minimum-content width
   is larger than the phone. Let each column actually shrink and wrap. */
html[lang="en"] .sim__split > *,
html[lang="en"] .sim__rules,
html[lang="en"] .sim__opts,
html[lang="en"] .sim__foot,
html[lang="en"] .rule-i,
html[lang="en"] .rule-i__t,
html[lang="en"] .rule-i__s {
  min-width: 0;
}

html[lang="en"] .rule-i__t,
html[lang="en"] .rule-i__s {
  overflow-wrap: anywhere;
}

/* Research cards and CTA: English copy must be allowed to grow vertically. */
html[lang="en"] .dcard__copy {
  font-size: 13.5px;
  line-height: 1.74;
}

html[lang="en"] .cta-box__title {
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
  text-wrap: balance;
}

/* Join page sections use the same long-form research copy. */
html[lang="en"] .jgrid,
html[lang="en"] .jtracks {
  min-width: 0;
}

html[lang="en"] .jno li,
html[lang="en"] .jyes li,
html[lang="en"] .jnote,
html[lang="en"] .jtl p,
html[lang="en"] .jtracks p {
  overflow-wrap: anywhere;
}

html[lang="en"] .jtracks h3 {
  align-items: flex-start;
}

@media (max-width: 900px) {
  html[lang="en"] .impact__bar {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 9px;
  }

  html[lang="en"] .impact__bar .v {
    min-width: 0;
    font-size: 10.5px;
  }

  html[lang="en"] .sim__rules,
  html[lang="en"] .sim__opts {
    overflow: hidden;
  }

  html[lang="en"] .sim__foot b {
    white-space: normal;
  }

  .arch {
    overflow: visible;
  }

  .archviz {
    display: none;
  }

  .arch-mobile {
    display: grid;
    gap: 12px;
    margin-top: 0;
  }

  html[lang="en"] .card__row .k {
    flex-basis: 76px;
  }

  html[lang="en"] .archviz .a-cd {
    font-size: 7.4px;
  }

  html[lang="en"] .dcard__head > div {
    min-width: 0;
  }

  html[lang="en"] .dcard__name,
  html[lang="en"] .dcard__zh,
  html[lang="en"] .dcard__status {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  html[lang="en"] .card__row .k {
    flex-basis: 72px;
  }

  html[lang="en"] .cta h2 {
    font-size: clamp(28px, 8.2vw, 40px);
  }
}

/* The French and German layers use the English animation vocabulary inside
   fixed SVG cells. Reuse the same measured type scale and flex constraints so
   labels stay inside their own boxes instead of colliding with the next item. */
html[lang="fr"] .card__row,
html[lang="de"] .card__row,
html[lang="fr"] .sim__foot,
html[lang="de"] .sim__foot,
html[lang="fr"] .gov__r > div,
html[lang="de"] .gov__r > div,
html[lang="fr"] .gov__head > div,
html[lang="de"] .gov__head > div {
  min-width: 0;
}

html[lang="fr"] .card__row,
html[lang="de"] .card__row {
  align-items: flex-start;
  gap: 12px;
}

html[lang="fr"] .card__row .k,
html[lang="de"] .card__row .k {
  flex: 0 0 82px;
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: .08em;
  line-height: 1.35;
}

html[lang="fr"] .card__row .v,
html[lang="de"] .card__row .v,
html[lang="fr"] .sim__foot > span,
html[lang="de"] .sim__foot > span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

html[lang="en"] .sim__foot > span,
html[lang="fr"] .sim__foot > span,
html[lang="de"] .sim__foot > span {
  line-height: 1.6;
}

html[lang="en"] .sim__foot b,
html[lang="fr"] .sim__foot b,
html[lang="de"] .sim__foot b {
  white-space: normal;
  margin-inline-end: .28em;
}

/* Keep the marker on the first text line and keep the heading/description
   in separate columns. This prevents translated bullets from appearing as
   one glued sentence. */
html[lang="en"] .sim__foot,
html[lang="fr"] .sim__foot,
html[lang="de"] .sim__foot {
  align-items: flex-start;
}

html[lang="en"] .hero__viz .viz-key li,
html[lang="fr"] .hero__viz .viz-key li,
html[lang="de"] .hero__viz .viz-key li {
  grid-template-columns: 16px minmax(0, max-content) minmax(0, 1fr);
  align-items: flex-start;
}

html[lang="en"] .hero__viz .viz-key li b,
html[lang="fr"] .hero__viz .viz-key li b,
html[lang="de"] .hero__viz .viz-key li b,
html[lang="en"] .hero__viz .viz-key li span,
html[lang="fr"] .hero__viz .viz-key li span,
html[lang="de"] .hero__viz .viz-key li span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="fr"] .enclave .lyr-t,
html[lang="de"] .enclave .lyr-t {
  font-size: 8.7px;
  letter-spacing: .11em;
}

html[lang="fr"] .enclave .lyr-d,
html[lang="de"] .enclave .lyr-d {
  font-size: 7.9px;
  letter-spacing: 0;
}

html[lang="fr"] .archviz .a-bt,
html[lang="de"] .archviz .a-bt { font-size: 12px; }
html[lang="fr"] .archviz .a-ct,
html[lang="de"] .archviz .a-ct { font-size: 9.8px; }
html[lang="fr"] .archviz .a-cd,
html[lang="de"] .archviz .a-cd { font-size: 8.1px; letter-spacing: 0; }
html[lang="fr"] .archviz .a-st,
html[lang="de"] .archviz .a-st { font-size: 8.7px; }
html[lang="fr"] .archviz .a-ht,
html[lang="de"] .archviz .a-ht { font-size: 10.8px; }
html[lang="fr"] .archviz .a-hd,
html[lang="de"] .archviz .a-hd { font-size: 8.1px; }

html[lang="fr"] .pillar__list li,
html[lang="de"] .pillar__list li,
html[lang="fr"] .pillar__list li b,
html[lang="de"] .pillar__list li b {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

html[lang="fr"] .viz-key b,
html[lang="de"] .viz-key b,
html[lang="fr"] .viz-key span,
html[lang="de"] .viz-key span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Shared mobile constraints for the long French/German controls and CTA
   copy. These are the same minimum-content protections used by English. */
html[lang="fr"] .sim__split > *,
html[lang="de"] .sim__split > *,
html[lang="fr"] .sim__rules,
html[lang="de"] .sim__rules,
html[lang="fr"] .sim__opts,
html[lang="de"] .sim__opts,
html[lang="fr"] .sim__foot,
html[lang="de"] .sim__foot,
html[lang="fr"] .rule-i,
html[lang="de"] .rule-i,
html[lang="fr"] .rule-i__t,
html[lang="de"] .rule-i__t,
html[lang="fr"] .rule-i__s,
html[lang="de"] .rule-i__s,
html[lang="fr"] .hero__in > *,
html[lang="de"] .hero__in > *,
html[lang="fr"] .hero__txt,
html[lang="de"] .hero__txt,
html[lang="fr"] .cta-box,
html[lang="de"] .cta-box,
html[lang="fr"] .cta-box__inner,
html[lang="de"] .cta-box__inner,
html[lang="fr"] .cta-box__desc,
html[lang="de"] .cta-box__desc,
html[lang="fr"] .cta-box__btn,
html[lang="de"] .cta-box__btn {
  min-width: 0;
}

html[lang="fr"] .rule-i__t,
html[lang="de"] .rule-i__t,
html[lang="fr"] .rule-i__s,
html[lang="de"] .rule-i__s {
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="fr"] .cta-box__title,
html[lang="de"] .cta-box__title {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

html[lang="fr"] .cta__actions,
html[lang="de"] .cta__actions,
html[lang="fr"] .cta__actions .btn,
html[lang="de"] .cta__actions .btn,
html[lang="fr"] .hero__txt h1,
html[lang="de"] .hero__txt h1,
html[lang="fr"] .hero__sub,
html[lang="de"] .hero__sub {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

html[lang="fr"] .cta__actions .btn,
html[lang="de"] .cta__actions .btn {
  white-space: normal;
  text-align: center;
}

html[lang="fr"] .cta-box__btn,
html[lang="de"] .cta-box__btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="fr"] .impact__bar .k,
html[lang="de"] .impact__bar .k {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

@media (max-width: 900px) {
  html[lang="fr"] .card__row .k,
  html[lang="de"] .card__row .k { flex-basis: 76px; }

  html[lang="fr"] .archviz .a-cd,
  html[lang="de"] .archviz .a-cd { font-size: 7.4px; }

  html[lang="fr"] .dcard__head > div,
  html[lang="de"] .dcard__head > div { min-width: 0; }

  html[lang="fr"] .dcard__name,
  html[lang="fr"] .dcard__zh,
  html[lang="fr"] .dcard__status,
  html[lang="de"] .dcard__name,
  html[lang="de"] .dcard__zh,
  html[lang="de"] .dcard__status { overflow-wrap: anywhere; }

  html[lang="fr"] .sim__rules,
  html[lang="fr"] .sim__opts,
  html[lang="de"] .sim__rules,
  html[lang="de"] .sim__opts { overflow: hidden; }

  html[lang="fr"] .hero__viz,
  html[lang="de"] .hero__viz,
  html[lang="fr"] .hero__viz .viz-key,
  html[lang="de"] .hero__viz .viz-key,
html[lang="fr"] .wm__intro,
html[lang="de"] .wm__intro,
html[lang="fr"] .wm__note,
html[lang="de"] .wm__note,
html[lang="fr"] .wm__intro p,
html[lang="de"] .wm__intro p,
html[lang="fr"] .wm__note p,
html[lang="de"] .wm__note p,
html[lang="fr"] .wm__note b,
html[lang="de"] .wm__note b {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

html[lang="fr"] .wm__note b,
html[lang="de"] .wm__note b { white-space: normal; }

  html[lang="en"] .hero__viz .viz-key li,
  html[lang="fr"] .hero__viz .viz-key li,
  html[lang="de"] .hero__viz .viz-key li {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  html[lang="en"] .hero__viz .viz-key li b,
  html[lang="fr"] .hero__viz .viz-key li b,
  html[lang="de"] .hero__viz .viz-key li b,
  html[lang="en"] .hero__viz .viz-key li span,
  html[lang="fr"] .hero__viz .viz-key li span,
  html[lang="de"] .hero__viz .viz-key li span {
    grid-column: 2;
  }

  html[lang="fr"] .cta__actions,
  html[lang="de"] .cta__actions { gap: 10px; }
}

@media (max-width: 640px) {
  html[lang="fr"] .card__row .k,
  html[lang="de"] .card__row .k { flex-basis: 72px; }
}

/* French and German contain longer compounds than the source copy. Keep
   headings, project briefs and controls inside their measured boxes. */
html[lang="fr"] h1,
html[lang="fr"] h2,
html[lang="fr"] h3,
html[lang="fr"] h4,
html[lang="fr"] .h1,
html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] h3,
html[lang="de"] h4,
html[lang="de"] .h1 {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

html[lang="fr"] .dcard__copy,
html[lang="fr"] .dcard__gap,
html[lang="de"] .dcard__copy,
html[lang="de"] .dcard__gap {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

@media (max-width: 768px) {
  .hero__ctas {
    width: min(100%, 320px);
    margin-inline: auto;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

@media (min-width: 901px) {
  /* French and German labels are longer, so tighten only their desktop
     workflow rail enough to keep all five stages on one line. */
  html[lang="fr"] .pipe,
  html[lang="de"] .pipe {
    gap: 0;
  }

  html[lang="fr"] .pipe__s,
  html[lang="de"] .pipe__s {
    gap: 4px;
    padding-inline: 6px;
  }

  html[lang="de"] .pipe__s {
    padding-inline: 4px;
  }
}

/* The workflow rail is a single process, so its five stages stay on one
   visual axis at every language and viewport width. */
.pipe {
  flex-wrap: nowrap;
}

@media (max-width: 640px) {
  /* With the secondary labels hidden on phones, this tighter measure keeps
     all five workflow stages on the same rail without horizontal scrolling. */
  .pipe {
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .pipe__s {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 4px;
    padding-inline: 2px;
  }

  .pipe__s b {
    font-size: clamp(7.5px, 2.3vw, 9px);
    letter-spacing: .08em;
  }

  html[lang="fr"] .pipe__s,
  html[lang="de"] .pipe__s {
    padding-inline: 2px;
  }
}