.cta .en-line { text-wrap: wrap }
.int-title {
  margin-bottom: 10px;
  font-size: var(--site-fs-h3)
}

.int-lead {
  max-width: 780px;
  margin-bottom: 28px;
  color: var(--text-2)
}

.int-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--site-space-40)
}

.int-card h4 {
  margin-bottom: 10px
}

.int-card p {
  margin-bottom: 16px;
  color: var(--text-2)
}

.loop-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr)
}

.loop-step {
  position: relative;
  padding: var(--site-space-24) var(--site-space-20) 0 0;
  border-top: 1px solid var(--line-strong)
}

.loop-step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 1px;
  height: 9px;
  background: var(--star)
}

.loop-step .idx-mono {
  display: block;
  margin-bottom: 10px
}

.loop-step .card-title {
  margin-bottom: 6px
}

.loop-step p {
  color: var(--text-2);
  font-size: var(--site-fs-small);
  text-wrap: balance
}

.loop-note {
  max-width: 760px;
  margin-top: 36px;
  color: var(--text-2)
}

.loop-note b {
  color: var(--star);
  font-weight: 600
}

.cta {
  padding: 120px 0;
  text-align: center
}

.cta .en-line {
  font-size: var(--site-fs-h2)
}

.cta p {
  max-width: 560px;
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: var(--site-fs-lead)
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px
}

.cta-domain {
  display: inline-flex;
  align-items: baseline;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: var(--site-fs-body);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
}

@media (max-width: 960px) {

  .origin-grid,
  .onto-grid {
    grid-template-columns: 1fr;
    gap: var(--site-space-40)
  }

  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 600px
  }

  .layer {
    grid-template-columns: 1fr;
    gap: var(--site-space-12)
  }

  .role-rows,
  .int-grid {
    grid-template-columns: 1fr;
    gap: var(--site-space-32)
  }

  .evo-track {
    grid-template-columns: 1fr;
    gap: var(--site-space-32);
    padding-left: 30px
  }

  .evo-track::before {
    top: 6px;
    right: auto;
    bottom: 6px;
    left: 5px;
    width: 1px;
    height: auto
  }

  .evo-node {
    padding-top: 0
  }

  .evo-node::before {
    top: 5px;
    left: -30px
  }

  .loop-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--site-space-28)
  }

  .ce-flow {
    grid-template-columns: 1fr;
    gap: var(--site-space-12)
  }

  .ce-middle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    grid-template-columns: none
  }

  .ce-arrow {
    display: flex;
    grid-column: auto;
    grid-template-columns: none;
    gap: var(--site-space-8);
    white-space: normal;
    justify-content: flex-start;
    text-align: left
  }

  .ce-arrow .lbl br {
    display: none
  }

}

@media (max-width: 560px) {
  .onto-flow {
    flex-direction: column;
    gap: 6px
  }

  .onto-arrow {
    width: 1px;
    height: 28px;
    margin: 0;
    background: linear-gradient(180deg, var(--line), var(--star))
  }

  .ce-panel {
    padding: var(--site-space-24) 18px
  }

  .gov-grid {
    grid-template-columns: 1fr;
    gap: var(--site-space-32)
  }

  .journey-line {
    display: none
  }

  .journey-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, var(--text-3), var(--star));
    transform-origin: top center
  }

  .journey-list {
    display: block
  }

  .journey-list li {
    display: grid;
    grid-template-columns: 1fr 76px 1fr;
    align-items: center;
    min-height: 84px;
    padding: 0
  }

  .journey-list li:nth-child(1),
  .journey-list li:nth-child(5) {
    min-height: 108px
  }

  .journey-list li:nth-child(1) {
    --s: 64px
  }

  .journey .mark {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0
  }

  .jn-txt {
    grid-column: 3;
    grid-row: 1;
    align-items: flex-start;
    text-align: left
  }

  .journey-list li:nth-child(even) .jn-txt {
    grid-column: 1;
    align-items: flex-end;
    text-align: right
  }

  .loop-steps {
    grid-template-columns: 1fr 1fr
  }

  .cta {
    padding: 88px 0
  }

  .origin-body p {
    margin-bottom: 12px;
    line-height: 1.65
  }
}

@media (max-width: 360px) {
  .jn-txt b {
    font-size: var(--site-fs-small)
  }
}