.dg { background: var(--blue); border-radius: 36px; padding: 32px; }
.flow { display: flex; gap: 28px; align-items: stretch; }
.node { position: relative; flex: 1; min-width: 0; padding: 22px; background: var(--white); border-radius: 22px; }
.node:not(:last-child)::after { content: '→'; position: absolute; display: flex; align-items: center; justify-content: center; width: 28px; height: 44px; right: -28px; top: calc(50% - 22px); color: #4e5166; font-size: 26px; }
.node strong, .node span { display: block; }
.node strong { font-size: 18px; line-height: 1.45; }
.node span { padding-top: 11px; font-size: 16px; line-height: 1.55; }
.dg figcaption { margin-top: 22px; font-size: 16px; line-height: 1.6; color: #474a5c; }
.hero-dg { position: relative; padding: 35px 30px 27px; background: var(--yellow); border-radius: 110px 110px 34px 34px; }
.hero-dg .flow { display: grid; grid-template-columns: 1fr; gap: 18px; }
.hero-dg .node { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 14px; padding: 20px 23px; min-height: 80px; background: #fffcf0; border-radius: 22px; }
.hero-dg .node:nth-child(2) { background: #eae3f4; }
.hero-dg .node:nth-child(3) { background: #e0ece9; }
.hero-dg .node span { padding: 0; }
.hero-dg .node:not(:last-child)::after { content: ''; top: 100%; left: 35px; width: 7px; height: 18px; background: #9f925c; }
.hero-dg figcaption { color: #57503a; }
@media (max-width: 680px) {
  .dg { padding: 24px; border-radius: 28px; }
  .flow { flex-direction: column; gap: 25px; }
  .node { padding: 19px 20px; }
  .node:not(:last-child)::after { content: '↓'; top: 100%; left: calc(50% - 22px); right: auto; width: 44px; height: 25px; }
  .hero-dg { padding: 30px 22px 24px; border-radius: 65px 65px 28px 28px; }
  .hero-dg .node { padding: 18px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-dg .node strong { font-size: 17px; }
  .hero-dg .node span { font-size: 16px; }
  .hero-dg .node:not(:last-child)::after { top: 100%; left: 35px; width: 7px; height: 18px; }
}