.origin-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start
}

.origin-body p {
  margin-bottom: 20px;
  color: var(--text-2);
  font-size: var(--site-fs-lead);
  line-height: var(--site-lh-loose)
}

.origin-body p:last-child {
  margin-bottom: 0
}

.origin-body strong {
  color: var(--text);
  font-weight: 600
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--site-space-40)
}

.pillar .num {
  margin-bottom: 18px;
  font-size: var(--site-fs-h2);
  line-height: 1;
  color: var(--star)
}

.pillar h3 {
  margin-bottom: 14px;
  font-size: var(--site-fs-h3)
}

.pillar p {
  color: var(--text-2)
}

.onto-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: var(--site-space-64);
  align-items: center
}

.onto-points {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 32px
}

.onto-point {
  padding-left: 18px;
  border-left: 1px solid var(--line-strong)
}

.onto-point b {
  display: block;
  margin-bottom: 4px;
  font-weight: 700
}

.onto-point p {
  color: var(--text-2)
}

.onto-flow {
  display: flex;
  align-items: stretch
}

.onto-stage {
  flex: 1;
  padding: 22px 14px 18px;
  text-align: center
}

.onto-stage .idx-mono {
  display: block;
  margin-bottom: 8px
}

.onto-stage .card-title {
  margin-bottom: 12px
}

.stage-items {
  text-wrap: balance;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--site-fs-small);
  line-height: 2
}

.stage-items b {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap
}

.onto-arrow {
  align-self: center;
  flex: none;
  width: 36px;
  height: 1px;
  margin: 0 6px;
  background: linear-gradient(90deg, var(--line), var(--star))
}

.onto-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--site-fs-small);
  text-align: center
}

.onto-note b,
.ce-note b,
.layer .note b {
  color: var(--star);
  font-weight: 500
}

.onto-note .keep {
  white-space: nowrap
}

.layer-stack {
  border-top: 1px solid var(--line)
}

.layer {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--site-space-32);
  padding: var(--site-space-28) 0 var(--site-space-28) 22px;
  border-bottom: 1px solid var(--line);
}

.layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--lc)
}

.layer.l-domain {
  --lc: var(--star)
}

.layer.l-ai {
  --lc: var(--text)
}

.layer.l-platform {
  --lc: var(--text-3)
}

.layer h3 {
  font-size: var(--site-fs-h3)
}

.layer .idx-mono {
  display: block;
  margin-top: 4px
}

.layer-tag {
  display: block;
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--site-fs-small)
}

.layer-body p {
  color: var(--text-2)
}

.layer .note {
  margin-top: 10px;
  color: var(--text-3);
  font-size: var(--site-fs-small)
}

.ce-panel {
  margin-top: 48px;
  padding: var(--site-space-32)
}

.ce-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--text-2);
  font-size: var(--site-fs-small);
  font-weight: 600
}

.ce-title::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--star)
}

.ce-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center
}

.ce-side {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--site-radius-sm);
  background: var(--bg)
}

.ce-side .head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-weight: 700
}

.ce-desc {
  margin-bottom: 14px;
  color: var(--text-2);
  font-size: var(--site-fs-small)
}

.ce-devices,
.int-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-8)
}

.ce-middle {
  display: grid;
  grid-template-columns: 56px max-content;
  column-gap: var(--site-space-12);
  row-gap: var(--site-space-12);
  align-items: center
}

.ce-arrow {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  color: var(--text-3);
  font-size: var(--site-fs-small);
  white-space: nowrap
}

.ce-arrow.up,
.ce-arrow.down {
  color: var(--star)
}

.ce-arrow .lbl {
  color: var(--text-3);
  line-height: 1.4
}

.ce-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--site-fs-small);
  text-align: center
}