/* TJ-223 — merge the former journey strip into the primary navigation surface. */
body.tj-os-page .tj-os-nav {
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 9px 18px !important;
  width: min(1450px, calc(100% - 32px)) !important;
  min-height: 0 !important;
  padding: 11px 14px 13px !important;
  overflow: visible !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.91) !important;
  box-shadow: 0 18px 54px rgba(40, 79, 118, 0.1) !important;
  backdrop-filter: blur(22px) saturate(1.15);
}

body.tj-os-page .tj-os-brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

body.tj-os-page .tj-os-actions-right {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(11px, 0.85vw, 15px) !important;
  padding: 2px !important;
  justify-self: end !important;
  margin-inline-end: clamp(24px, 3.25vw, 58px) !important;
}

body.tj-os-page .tj-lang-switch {
  min-height: 42px !important;
  padding: 4px !important;
}

body.tj-os-page .tj-os-tools > summary,
body.tj-os-page .tj-os-support,
body.tj-os-page #systemPill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding-inline: 12px !important;
}

body.tj-os-page #systemPill {
  min-width: 118px !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.tj-os-page .tj-os-buy {
  min-height: 44px !important;
  padding-inline: 17px !important;
}

body.tj-os-page .tj-os-primary-nav {
  position: static !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: visible !important;
  border: 1px solid rgba(48, 91, 128, 0.09) !important;
  border-radius: 19px !important;
  background: linear-gradient(180deg, rgba(244, 250, 253, 0.8), rgba(250, 253, 255, 0.96)) !important;
}

body.tj-os-page .tj-os-primary-nav a {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 59px !important;
  padding: 9px 11px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--tj-ink) !important;
  background: transparent !important;
  line-height: 1.15 !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

body.tj-os-page .tj-os-primary-nav a::after {
  display: none !important;
}

body.tj-os-page .tj-os-primary-nav a:hover,
body.tj-os-page .tj-os-primary-nav a:focus-visible {
  border-color: rgba(43, 118, 218, 0.18) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 24px rgba(57, 104, 145, 0.1) !important;
  transform: translateY(-1px) !important;
}

body.tj-os-page .tj-nav-title {
  display: block;
  max-width: 100%;
  color: var(--tj-ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

body.tj-os-page .tj-nav-subtitle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--tj-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tj-os-page .system-dock.tj-os-journey {
  display: none !important;
}

@media (max-width: 1180px) {
  body.tj-os-page .tj-os-nav {
    grid-template-columns: minmax(190px, 1fr) auto !important;
  }

  body.tj-os-page .tj-os-actions-right {
    grid-column: 2 !important;
    margin-inline-end: 0 !important;
  }

  body.tj-os-page .tj-os-primary-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.tj-os-page .tj-os-nav {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    width: calc(100% - 20px) !important;
    padding: 9px !important;
    border-radius: 22px !important;
  }

  body.tj-os-page .tj-os-brand {
    min-width: 0 !important;
  }

  body.tj-os-page .tj-os-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.tj-os-page .tj-os-actions-right {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-inline-end: 0 !important;
    overflow: visible !important;
  }

  body.tj-os-page .tj-os-actions-right::-webkit-scrollbar {
    display: none;
  }

  body.tj-os-page .tj-os-tools,
  body.tj-os-page .tj-os-support,
  body.tj-os-page .tj-os-nav .pill {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  body.tj-os-page .tj-os-actions-right .tj-os-buy {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 38px !important;
  }

  body.tj-os-page .tj-os-primary-nav {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 5px !important;
    overflow: visible !important;
  }

  body.tj-os-page .tj-os-primary-nav::-webkit-scrollbar {
    display: none;
  }

  body.tj-os-page .tj-os-primary-nav a {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 8px 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tj-os-page .tj-os-primary-nav a {
    transition: none !important;
  }
}

/* Fourteen real packages: twelve standard cards fill four rows; the final
   recovery and payment-GEO products close the grid as a balanced two-card row. */
body.tj-os-page #products .product-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: min(1180px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  align-items: stretch !important;
}

body.tj-os-page #products .product-card {
  grid-column: span 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

@media (min-width: 981px) {
  body.tj-os-page #products .product-card[data-product-card="payment-geo-flow"] {
    order: 99 !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"] {
    order: 100 !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"],
  body.tj-os-page #products .product-card[data-product-card="payment-geo-flow"] {
    grid-column: span 3 !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    column-gap: 0 !important;
    row-gap: 14px !important;
    min-height: 706px !important;
    height: 706px !important;
    padding: 28px 24px 24px !important;
    align-items: stretch !important;
    background:
      radial-gradient(circle at 86% 18%, rgba(44, 119, 235, 0.1), transparent 25%),
      linear-gradient(135deg, rgba(241, 251, 251, 0.98), rgba(248, 251, 255, 0.98)) !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"] .product-card-head {
    grid-area: auto !important;
    min-height: 144px !important;
    margin: 0 0 12px !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"] .product-price {
    grid-area: auto !important;
    min-height: 34px !important;
    margin: 0 0 14px !important;
    align-self: stretch !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"] .product-description {
    grid-area: auto !important;
    min-height: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"] .product-divider {
    display: block !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"] .product-includes {
    grid-area: auto !important;
    display: grid !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  body.tj-os-page #products .product-card[data-product-card="checkout-recovery-sprint"] .product-cta {
    grid-area: auto !important;
    width: 100% !important;
    min-height: 42px !important;
    margin-top: auto !important;
    align-self: stretch !important;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  body.tj-os-page #products .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.tj-os-page #products .product-card {
    grid-column: auto !important;
  }
}

@media (max-width: 680px) {
  body.tj-os-page #products .product-grid {
    grid-template-columns: 1fr !important;
  }

  body.tj-os-page #products .product-card {
    grid-column: auto !important;
  }
}

/* TJ-223 global composition repair.
   One navigation baseline now governs the complete page. The previous cascade
   mixed 1450 / 1380 / 1260 / 1180 / 1120px shells, which made wide screens
   look pinched even though the header was balanced. */
body.tj-os-page {
  --tj223-page-shell: min(1450px, calc(100% - 32px));
  --tj223-content-inset: clamp(20px, 2.1vw, 34px);
  --tj223-grid-gap: clamp(18px, 1.7vw, 28px);
  --tj223-card-pad: clamp(26px, 2.3vw, 36px);
}

body.tj-os-page .tj-os-hero,
body.tj-os-page .tj218-commercial-band,
body.tj-os-page .tj-os-pillars,
body.tj-os-page .authority-chain,
body.tj-os-page .authority-media-story,
body.tj-os-page .authority-offer-ribbon,
body.tj-os-page .commerce-hub,
body.tj-os-page .email-brand,
body.tj-os-page .capability-library,
body.tj-os-page main > .section,
body.tj-os-page .wrap.authority-proof-stack > .section,
body.tj-os-page .siteos-robot-guide,
body.tj-os-page .siteos-usage-guide {
  width: var(--tj223-page-shell) !important;
  max-width: none !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

body.tj-os-page .tj-os-hero {
  grid-template-columns: minmax(0, 0.99fr) minmax(540px, 1.01fr) !important;
  gap: clamp(48px, 5vw, 78px) !important;
  min-height: auto !important;
  margin-top: clamp(26px, 3vw, 42px) !important;
  padding: clamp(38px, 3.5vw, 56px) var(--tj223-content-inset) clamp(72px, 5.5vw, 96px) !important;
}

body.tj-os-page .tj218-commercial-band {
  padding-inline: var(--tj223-content-inset) !important;
}

body.tj-os-page #siteos-flow > .siteos-shell {
  width: var(--tj223-page-shell) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.tj-os-page .tj-os-pillars {
  padding-inline: var(--tj223-content-inset) !important;
}

/* Equal columns remove the old "one wide, two squeezed" composition. */
body.tj-os-page .tj218-scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--tj223-grid-gap) !important;
}

body.tj-os-page .tj218-scenario {
  min-height: 420px !important;
  padding: var(--tj223-card-pad) !important;
}

body.tj-os-page .tj218-scenario h3 {
  margin-top: clamp(42px, 4vw, 62px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.032em !important;
}

body.tj-os-page .tj218-scenario p {
  font-size: 15px !important;
  line-height: 1.78 !important;
}

body.tj-os-page .tj218-system-grid {
  gap: var(--tj223-grid-gap) !important;
}

body.tj-os-page .tj218-system-card {
  min-height: 292px !important;
  gap: 14px !important;
  padding: var(--tj223-card-pad) !important;
}

body.tj-os-page .tj218-system-card p {
  font-size: 14px !important;
  line-height: 1.76 !important;
}

body.tj-os-page .tj218-case-grid,
body.tj-os-page .tj218-trust-rail,
body.tj-os-page .tj218-value-layout {
  gap: var(--tj223-grid-gap) !important;
}

body.tj-os-page .tj218-case-card,
body.tj-os-page .tj218-trust-rail article {
  padding: var(--tj223-card-pad) !important;
}

body.tj-os-page .siteos-workspace,
body.tj-os-page .siteos-data-grid {
  gap: var(--tj223-grid-gap) !important;
}

body.tj-os-page .siteos-module {
  padding: clamp(22px, 2vw, 30px) !important;
}

body.tj-os-page .usage-guide-grid {
  gap: clamp(16px, 1.5vw, 24px) !important;
}

body.tj-os-page .usage-guide-grid article {
  min-height: 150px !important;
  gap: 11px !important;
  padding: clamp(20px, 1.8vw, 28px) !important;
  border-radius: 18px !important;
}

body.tj-os-page .commerce-hub > .section {
  width: 100% !important;
  max-width: none !important;
}

body.tj-os-page #products .product-grid {
  width: 100% !important;
  max-width: none !important;
  gap: clamp(22px, 1.8vw, 30px) !important;
}

body.tj-os-page .deliver-grid {
  gap: clamp(20px, 1.7vw, 28px) !important;
}

body.tj-os-page .deliver-card {
  padding: clamp(26px, 2.2vw, 36px) !important;
}

body.tj-os-page #products .product-card.selected::after {
  display: none !important;
  content: none !important;
}

body.tj-os-page .section-head {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-inline: auto !important;
  margin-bottom: clamp(32px, 3vw, 48px) !important;
}

body.tj-os-page .section-head > p:not(.eyebrow) {
  max-width: 72ch !important;
  font-size: 16px !important;
  line-height: 1.82 !important;
}

/* The three-step band was already compositionally successful. Keep its
   existing card geometry while allowing the outer shell to align globally. */
body.tj-os-page #how .section-head {
  margin-bottom: 22px !important;
}

body.tj-os-page #how .steps {
  gap: 0 !important;
}

/* Chinese needs different line-breaking and scale from the English source.
   These rules reduce visual shouting without shrinking information. */
html[lang^="zh"] body.tj-os-page main h1,
html[lang^="zh"] body.tj-os-page main h2,
html[lang^="zh"] body.tj-os-page main h3 {
  text-wrap: balance;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

html[lang^="zh"] body.tj-os-page .tj-os-hero h1.tj218-commercial-title {
  max-width: 760px !important;
  font-size: clamp(52px, 4.25vw, 66px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  white-space: pre-line !important;
}

html[lang^="zh"] body.tj-os-page .tj218-commercial-lead,
html[lang^="zh"] body.tj-os-page .tj-os-lead {
  max-width: 720px !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.86 !important;
}

html[lang^="zh"] body.tj-os-page .tj218-section-heading {
  grid-template-columns: minmax(160px, 0.3fr) minmax(0, 1.34fr) minmax(280px, 0.62fr) !important;
  gap: clamp(28px, 3.5vw, 58px) !important;
  margin-bottom: clamp(40px, 3.6vw, 56px) !important;
}

html[lang^="zh"] body.tj-os-page .tj218-section-heading h2 {
  max-width: 840px !important;
  font-size: clamp(42px, 3.55vw, 56px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.032em !important;
}

html[lang^="zh"] body.tj-os-page .tj218-section-heading > p {
  font-size: 15.5px !important;
  line-height: 1.82 !important;
}

html[lang^="zh"] body.tj-os-page .authority-chain h2,
html[lang^="zh"] body.tj-os-page .email-brand h2,
html[lang^="zh"] body.tj-os-page .capability-library h2 {
  font-size: clamp(48px, 4vw, 62px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.032em !important;
  white-space: pre-line !important;
}

html[lang^="zh"] body.tj-os-page .authority-media-story h2 {
  font-size: clamp(42px, 3.45vw, 54px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.028em !important;
  white-space: pre-line !important;
}

html[lang^="zh"] body.tj-os-page .section-head .h2,
html[lang^="zh"] body.tj-os-page .siteos-robot-guide h2,
html[lang^="zh"] body.tj-os-page .siteos-usage-guide h2 {
  font-size: clamp(42px, 3.45vw, 54px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
}

html[lang^="zh"] body.tj-os-page #siteosTitle {
  font-size: clamp(44px, 3.5vw, 54px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  white-space: pre-line !important;
}

html[lang^="zh"] body.tj-os-page #usageGuideTitle {
  white-space: pre-line !important;
}

html[lang^="zh"] body.tj-os-page main p,
html[lang^="zh"] body.tj-os-page main li {
  line-height: 1.78;
}

@media (max-width: 1180px) {
  body.tj-os-page .tj-os-hero {
    grid-template-columns: 1fr !important;
  }

  body.tj-os-page .tj218-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.tj-os-page .tj218-scenario:first-child {
    grid-column: 1 / -1 !important;
  }

  html[lang^="zh"] body.tj-os-page .tj218-section-heading {
    grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr) !important;
  }

  html[lang^="zh"] body.tj-os-page .tj218-section-heading > p {
    grid-column: 2 !important;
  }
}

@media (max-width: 860px) {
  body.tj-os-page {
    --tj223-page-shell: calc(100% - 24px);
    --tj223-content-inset: clamp(0px, 2.5vw, 18px);
  }

  body.tj-os-page .tj218-scenario-grid {
    grid-template-columns: 1fr !important;
  }

  body.tj-os-page .tj218-scenario:first-child {
    grid-column: auto !important;
  }

  html[lang^="zh"] body.tj-os-page .tj218-section-heading {
    grid-template-columns: 1fr !important;
  }

  html[lang^="zh"] body.tj-os-page .tj218-section-heading > p {
    grid-column: auto !important;
  }
}

@media (max-width: 680px) {
  body.tj-os-page {
    --tj223-page-shell: calc(100% - 20px);
    --tj223-content-inset: 0px;
  }

  body.tj-os-page .tj-os-hero {
    gap: 34px !important;
    margin-top: 24px !important;
    padding-block: 40px 64px !important;
  }

  html[lang^="zh"] body.tj-os-page .tj-os-hero h1.tj218-commercial-title {
    font-size: clamp(40px, 11vw, 52px) !important;
    line-height: 1.08 !important;
  }

  html[lang^="zh"] body.tj-os-page .tj218-section-heading h2,
  html[lang^="zh"] body.tj-os-page .section-head .h2,
  html[lang^="zh"] body.tj-os-page .siteos-robot-guide h2,
  html[lang^="zh"] body.tj-os-page .siteos-usage-guide h2 {
    font-size: clamp(34px, 9.3vw, 46px) !important;
  }
}