/* Selected illustration family, arranged as the desktop B cycle. */
.homepage-concept {
  padding: 72px 0;
}

.concept-heading {
  margin-bottom: 36px;
  text-align: center;
}

.concept-heading h2 {
  font-size: 44px;
  line-height: 1.5;
  letter-spacing: -.035em;
}

.concept-heading h2 span { color: var(--green); }

.concept-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  column-gap: 28px;
  max-width: 1120px;
  margin-inline: auto;
}

.concept-pillar {
  min-width: 0;
  text-align: center;
}

.concept-knowledge { grid-column: 1; grid-row: 1; }
.concept-automation { grid-column: 3; grid-row: 1; }

.concept-visual {
  width: 320px;
  max-width: 100%;
  margin-inline: auto;
}

.concept-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.concept-pillar .concept-copy { margin-top: 12px; }

.concept-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #537363;
  font: 500 13px/1.6 Arial, sans-serif;
  letter-spacing: .12em;
}

.concept-label > span {
  color: var(--green);
  font-size: 14px;
  letter-spacing: 0;
}

.concept-copy h3 {
  margin-top: 10px;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: -.025em;
}

.concept-description {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.85;
  color: #4c665a;
  text-wrap: pretty;
}

.concept-forward {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-top: 145px;
}
.concept-forward svg { display: block; width: 104px; height: 40px; }
.concept-forward path,
.concept-cycle-turns path {
  stroke: #6d9a81;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.concept-cycle-turns {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(620px, 72%);
  height: 68px;
  margin: 14px auto 0;
}
.concept-cycle-turns svg { display: block; width: 96px; height: 68px; }

.concept-collaboration {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 46px;
  width: min(860px, 100%);
  margin: 0 auto;
}
.concept-collaboration .concept-visual { width: 300px; }
.concept-collaboration .concept-label { justify-content: flex-start; }
.concept-feedback {
  margin-top: 23px;
  color: #4c665a;
  font-size: 18px;
  line-height: 1.8;
}
.concept-feedback strong { color: var(--deep); font-weight: 550; }

/* Compact desktop cycle adopted on the current homepage and previews. */
.homepage-concept-compact { padding-block: 48px; }
.homepage-concept-compact .concept-heading { margin-bottom: 20px; }
.homepage-concept-compact .concept-visual { width: 300px; }
.homepage-concept-compact .concept-pillar .concept-copy { margin-top: 8px; }
.homepage-concept-compact .concept-forward { margin-top: 130px; }
.homepage-concept-compact .concept-cycle-turns {
  height: 40px;
  margin-top: 4px;
}
.homepage-concept-compact .concept-cycle-turns svg { width: 64px; height: 40px; }
.homepage-concept-compact .concept-collaboration {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  width: min(820px, 100%);
}
.homepage-concept-compact .concept-collaboration .concept-visual { width: 260px; }
.homepage-concept-compact .concept-feedback { margin-top: 16px; }