/* A single system map. All labels are ordinary, editable HTML text. */
.home-system { padding: 72px 0 82px; border-top: 1px solid var(--line); background: #FFF; }
.system-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: start; gap: 64px; margin-bottom: 32px; }
.home .system-intro h2 { max-width: 21ch; }
.system-intro p { max-width: 58ch; font-size: 16px; line-height: 1.75; }
.system-map { --system-gap: 48px; margin: 0; padding: 34px; border: 1px solid #C6D9E6; border-radius: 20px; background: #F4F9FC; overflow-wrap: anywhere; }
.system-map h3, .system-map p { margin: 0; }
.system-map p { font-size: 14px; line-height: 1.5; }
.system-map h3 { color: var(--navy); font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; }
.system-main { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(250px, 1.3fr) minmax(220px, 1fr); gap: var(--system-gap); align-items: start; }
.system-main > *, .system-after-agreement > * { min-width: 0; }
.system-sources { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 230px; }
.system-source { display: grid; grid-template-columns: minmax(64px, .7fr) minmax(100px, 1fr); align-items: center; gap: 12px; }
.system-source h3 { font-size: 22px; }
.system-source-name > p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.system-input { position: relative; align-self: center; padding-bottom: 20px; }
.system-input .system-flow-label { margin-bottom: 10px; }
.system-flow-label { color: #48647B; font-size: 13px !important; line-height: 1.4 !important; }
.system-line { position: absolute; display: block; height: 1px; border-top: 2px solid #1867C9; pointer-events: none; }
.system-line::after { content: ""; position: absolute; right: 1px; top: -5px; width: 7px; height: 7px; border-top: 2px solid #1867C9; border-right: 2px solid #1867C9; transform: rotate(45deg); }
.system-input .system-line { left: 0; right: calc(-1 * var(--system-gap)); bottom: 9px; border-top-style: dashed; border-top-color: #6487A4; }
.system-input .system-line::after { border-color: #6487A4; }
.system-core { position: relative; }
.system-core-box { display: flex; flex-direction: column; justify-content: center; min-height: 230px; padding: 28px; border-radius: 13px; background: var(--navy); color: #FFF; }
.system-core-box .system-brand { color: #6DD5E7; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; }
.system-core-box h3 { margin: 10px 0 18px; color: #FFF; font-size: 29px; letter-spacing: -.6px; }
.system-core-box p:not(.system-brand) { color: #D3E3ED; font-size: 15px; line-height: 1.6; }
.system-core-box p + p { margin-top: 5px; }
.system-core-exit { position: absolute; top: 60px; left: 100%; width: var(--system-gap); height: 1px; }
.system-core-exit .system-line { inset: 0; }
.system-3d { position: relative; display: flex; align-items: center; gap: 14px; margin: 22px 0 0 20px; padding: 12px 0 0 18px; border-left: 1px dashed #6487A4; }
.system-3d::before { content: ""; position: absolute; top: -22px; left: -1px; height: 22px; border-left: 1px dashed #6487A4; }
.system-3d svg { flex: 0 0 36px; width: 36px; height: 42px; color: #1867C9; }
.system-3d h3 { font-size: 17px; }
.system-3d .system-optional { margin-bottom: 4px; color: #1261BF; font-size: 12px; font-weight: 700; }
.system-3d p:last-child { margin-top: 5px; color: var(--muted); font-size: 13px; }
.system-configurator { display: flex; flex-direction: column; justify-content: center; min-height: 120px; }
.system-configurator h3 { font-size: 24px; }
.system-configurator p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.system-output-branch { position: relative; height: 32px; margin-bottom: 13px; border-left: 1px solid #1867C9; }
.system-output-branch::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid #1867C9; }
.system-documents { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; }
.system-documents h3 { font-size: 17px; }
.system-documents p { margin-top: 8px; color: var(--muted); }
.system-after-agreement { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(88px, .65fr) minmax(110px, .75fr) minmax(88px, .65fr) minmax(150px, 1fr); align-items: center; gap: 20px; margin-top: 32px; padding-top: 30px; border-top: 1px solid #CCDDE9; }
.system-after-agreement h3 { font-size: 18px; }
.system-after-agreement .system-stage-label { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.system-after-agreement .system-end-note { margin-top: 7px; color: var(--muted); font-size: 13px; }
.system-order-link { position: relative; padding-bottom: 22px; }
.system-order-link .system-line { left: 0; right: 0; bottom: 9px; border-top-style: dashed; border-top-color: #6487A4; }
.system-order-link .system-line::after { border-color: #6487A4; }
.system-order-link.system-erp-route .system-line { border-top-style: solid; border-top-color: #849BAE; }
.system-order-link.system-erp-route .system-line::after { border-color: #849BAE; }
.system-map figcaption { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #CCDDE9; color: #48647B; }
.system-map figcaption p { font-size: 13px; line-height: 1.65; }
.journey-context-note { padding-left: 14px; border-left: 2px solid #8BAAC1; color: #48647B; }
.journey-quote-cover .journey-document-frame img { object-fit: contain; background: #E7EFF5; }
.system-articles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 64px; align-items: start; margin-top: 32px; padding-top: 30px; }
.system-articles h3 { color: var(--navy); font-size: 23px; line-height: 1.3; letter-spacing: -.4px; }
.system-articles p { margin-bottom: 14px; font-size: 16px; line-height: 1.75; }
.system-articles a { min-height: 44px; padding: 7px 0; }
@media (max-width: 1050px) {
  .system-map { --system-gap: 30px; padding: 28px; }
  .system-main { grid-template-columns: minmax(150px, .85fr) minmax(230px, 1.25fr) minmax(185px, 1fr); }
  .system-core-box { padding: 22px; }
  .system-core-box h3 { font-size: 26px; }
  .system-source { gap: 8px; grid-template-columns: minmax(52px, .6fr) minmax(85px, 1fr); }
  .system-after-agreement { gap: 14px; grid-template-columns: minmax(130px, 1fr) minmax(70px, .6fr) minmax(85px, .7fr) minmax(70px, .6fr) minmax(130px, 1fr); }
}
@media (max-width: 820px) {
  .home-system { padding: 54px 0 60px; }
  .system-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; }
  .system-intro p { max-width: none; }
  .system-map { padding: 24px; }
  .system-main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .system-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 24px; min-height: 0; }
  .system-source { display: block; text-align: center; }
  .system-source-name { min-height: 66px; }
  .system-input { min-height: 86px; padding: 8px 0 34px; }
  .system-input .system-line { top: 47px; bottom: 0; left: 50%; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px dashed #6487A4; }
  .system-input .system-line::after { top: auto; bottom: 2px; left: -5px; right: auto; transform: rotate(135deg); }
  .system-core { display: grid; grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "model model" "three route"; }
  .system-core-box { grid-area: model; min-height: 220px; }
  .system-3d { grid-area: three; margin: 22px 10px 24px 18px; padding-bottom: 8px; }
  .system-core-exit { grid-area: route; position: relative; inset: auto; align-self: stretch; width: 34px; height: auto; }
  .system-core-exit .system-line { top: 0; bottom: 0; left: 50%; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px solid #1867C9; }
  .system-core-exit .system-line::after { top: auto; bottom: 2px; left: -5px; right: auto; transform: rotate(135deg); }
  .system-configurator { min-height: 102px; padding: 14px 12px 14px 0; text-align: right; }
  .system-configurator h3 { font-size: 24px; }
  .system-output-branch { height: 26px; }
  .system-documents { gap: 20px; padding-bottom: 8px; }
  .system-after-agreement { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 26px; padding-top: 24px; }
  .system-after-agreement > div:not(.system-order-link) { padding: 10px 0; }
  .system-order-link { min-height: 74px; padding: 11px 0 11px 24px; margin-left: 11px; }
  .system-order-link .system-line { top: 0; bottom: 0; left: 0; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px dashed #6487A4; }
  .system-order-link .system-line::after { top: auto; bottom: 2px; left: -5px; right: auto; transform: rotate(135deg); }
  .system-order-link.system-erp-route .system-line { border-top: 0; border-left: 2px solid #849BAE; }
  .system-map figcaption { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; padding-top: 18px; }
  .system-articles { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; padding-top: 16px; }
}
@media (max-width: 380px) {
  .system-map { padding: 20px; }
  .system-sources { gap: 16px; }
  .system-documents { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .system-core-box { padding: 20px; }
  .system-3d { margin-left: 14px; gap: 10px; padding-left: 12px; }
  .system-3d svg { flex-basis: 28px; width: 28px; }
}