/* The product's scientific decision logic, before its worked examples. */
.system-page .sci-hero h1 { max-width: 16ch; }
.system-page .system-hero-note { margin-top: 22px; color: #b4c4b3; font: 11px/1.8 var(--mono); }
.system-pipeline { padding: clamp(22px, 3vw, 36px); border: 1px solid #4b5c4b; border-radius: 10px; background: #1b2d23; }
.system-pipeline-label { display: flex; align-items: center; gap: 12px; color: #c1cfba; font: 10px/1.7 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.system-pipeline ol { padding: 0; margin: 27px 0 0; list-style: none; }
.system-pipeline li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 15px; padding-bottom: 26px; }
.system-pipeline li:last-child { padding-bottom: 0; }
.system-pipeline li:not(:last-child)::after { position: absolute; content: ''; left: 13px; top: 34px; bottom: 6px; width: 1px; background: #4b624a; }
.system-node { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #6a7b60; border-radius: 50%; color: #c9d5bd; font: 9px var(--mono); }
.system-pipeline-engine .system-node { border-color: #c4ac46; background: #d8c159; color: #17251c; }
.system-pipeline strong { display: block; font-size: 17px; line-height: 1.4; font-weight: 520; letter-spacing: -.02em; color: #f1f4e9; }
.system-pipeline p { color: #b6c6b4; font-size: 13px; line-height: 1.65; margin-top: 6px; }
.system-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; border: 1px solid #d3dccd; border-radius: 7px; overflow: hidden; }
.system-choice { padding: clamp(22px, 2.6vw, 36px); background: #eef1e8; }
.system-choice--auto { border-left: 1px solid #d3dccd; background: #fff; }
.system-choice h3 { margin-top: 22px; font-size: clamp(25px, 2.25vw, 33px); line-height: 1.16; max-width: 21ch; text-wrap: balance; }
.system-choice > p:not(.sci-label) { margin-top: 22px; font-size: 14px; line-height: 1.8; }
.system-choice ul { list-style: none; padding: 0; margin: 25px 0 0; }
.system-choice li { position: relative; border-top: 1px solid #d3dccd; padding: 16px 0 16px 24px; font-size: 14px; line-height: 1.7; }
.system-choice li:last-child { padding-bottom: 0; }
.system-choice li::before { content: ''; position: absolute; left: 0; top: 27px; width: 8px; border-top: 1px solid #889a80; }
.system-choice--auto li::before { height: 5px; top: 25px; border: 0; border-left: 1.5px solid #9a7d1c; border-bottom: 1.5px solid #9a7d1c; transform: rotate(-45deg); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 651px) {
    .system-choices { grid-template-rows: auto auto auto 1fr; }
    .system-choice { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  }
}
.system-page .system-origin { font-size: 14px; color: #52634e; border-left: 2px solid #a7b498; padding-left: 18px; }
.system-page .system-trust { padding: clamp(26px, 3.6vw, 44px); background: #14221c; color: #f6f6f0; border: 0; border-radius: 8px; }
.system-trust > .sci-label { color: #d4bf58; }
.system-trust h2 { color: #f5f6ee; font-size: clamp(32px, 3vw, 46px); max-width: 24ch; }
.system-trust > .sci-intro { color: #becbbb; font-size: 16px; line-height: 1.8; }
.system-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 33px; }
.system-trust-grid article { border-top: 1px solid #4e5f4b; padding-top: 16px; min-width: 0; }
.system-trust-grid article > span { color: #99ad91; font: 11px/1.7 var(--mono); }
.system-trust-grid h3 { color: #f0f3e9; font-size: 23px; line-height: 1.2; margin-top: 23px; min-height: 2.4em; }
.system-trust-grid p { color: #bac8b7; font-size: 13px; line-height: 1.8; margin-top: 15px; }
.system-trust-footer { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 18px; border-top: 1px solid #4e5f4b; padding-top: 23px; margin-top: 30px; }
.system-trust-footer p { font-size: 12px; line-height: 1.8; color: #aebfaa; max-width: 45ch; }
.system-trust-footer .sci-link { color: #f0f3e9; font-size: 13px; }
.system-trust-footer .sci-link:hover { color: #edcf58; }
.system-example .sci-comparison { background: #eff2e9; }
@media (max-width: 1100px) {
  .system-trust-grid { grid-template-columns: 1fr; gap: 22px; }
  .system-trust-grid h3 { min-height: 0; margin-top: 13px; }
  .system-trust-grid p { margin-top: 10px; }
}
@media (max-width: 760px) {
  .system-pipeline { display: none; }
  .system-page .sci-hero h1 { max-width: 18ch; }
  .system-trust-grid { gap: 18px; }
}
@media (max-width: 650px) {
  .system-choices { grid-template-columns: 1fr; }
  .system-choice--auto { order: -1; border-left: 0; border-bottom: 1px solid #d3dccd; }
  .system-choice h3 { max-width: 24ch; font-size: 28px; margin-top: 15px; }
  .system-choice > p:not(.sci-label) { margin-top: 16px; }
  .system-trust-grid { grid-template-columns: 1fr; gap: 23px; }
  .system-trust-grid h3 { min-height: 0; margin-top: 13px; }
  .system-trust-grid p { margin-top: 10px; font-size: 14px; }
  .system-page .system-trust { padding: 25px 22px; }
}

.system-trust > .system-trust-context { color: #bac8b7; font-size: 14px; line-height: 1.8; margin-top: 18px; max-width: 78ch; }